Good content takes time and effort to come up with.
Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.
Lazy Load YouTube And Other Videos In Website
29th August 2020
2 mins read
Share On
In this article lets learn simple steps to lazy load YouTube videos or any other videos. Once your website loads and if contains any YouTube or any other videos then the website loads longer than usual which has a huge impact on your users.
Solution
We will include the video thumbnail and on click of the thumbnail we will load the video. This drastically improves website loading and retaining most of your users
We will cover the following
- HTML
- CSS
- Javascript
- Any YouTube Video Thumbnail Code
NOTE: Code available at GitHub Lazy Load YouTube And Other Videos In Website
Step 1 - HTML
First let's add the HTML template with YouTube video thumbnail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Load YouTube Videos</title>
<!-- Video loading CSS style -->
<link rel="stylesheet" href="video-loader.css">
</head>
<body>
<div class="container">
<!-- Adding original source in data-src -->
<div class="video-wrapper" data-src="https://www.youtube.com/embed/R5ntdxOZ70E">
<!-- Loading video thumbnail -->
<img class="video-image" src="https://img.youtube.com/vi/R5ntdxOZ70E/hqdefault.jpg" />
</div>
</div>
<!-- Video loading JS script -->
<script src="video-loader.js"></script>
</body>
</html>
Step 2 - CSS
Responsive CSS to load youtube videos.
video-loader.css
.container {
width: 480px;
margin: 0 auto;
}
.video-wrapper {
position: relative;
padding-top: 30px;
height: 100%;
overflow: hidden;
}
.video-image {
cursor: pointer;
}
.video-play-btn {
position: absolute;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Step 3 - Javascript
We are looping through all the video wrapper and listening for the click event to occur. When the click event happens we will load the parent set data-src actual video source.
video-loader.js
function loadVideo(e){
var parent = this.parentNode;
parent.style.paddingBottom = "56.25%";
var dataSrc = parent.getAttribute('data-src');
parent.innerHTML = '<iframe class="video" src="'+ dataSrc +'?rel=0&autoplay=1&wmode=transparent" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen wmode="Opaque"></iframe>';
}
var videoImage = document.querySelectorAll('.video-wrapper .video-image');
for(var i = 0; i < videoImage.length; i++){
videoImage[i].addEventListener('click', loadVideo);
}
Step 4 - Any YouTube Video Thumbnail Code
If you need any YouTube video thumbnail then you can use the following URLs. Make sure to just replace your YouTube video-id.
Default image thumbnail
https://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg
High quality thumbnail
https://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg
Medium quality thumbnail
https://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
Conclusion
NOTE: Code available at GitHub Lazy Load YouTube And Other Videos In Website
I hope this article helped you. Please share it with your friends.
Random Articles For You
Push Files To CPanel / Remote Server using FTP Software FileZilla
Generate RSS Feeds in PHP Laravel
Foreign Key Migrations Simplified In Laravel 7.x
PHP Built-In Web Server & Testing Your Development Project In Mobile Without Any Software
Simple Way To Create Resourceful API Controller In Laravel
NGINX Security Best Practices & Optimization
Free SSL Certificate In cPanel With ZeroSSL & Certbot
Google reCAPTCHA Integration In PHP Laravel Forms
Use Different PHP Versions In Ubuntu / Linux
What Is Composer? How Does It Work? Useful Composer Commands And Usage
Client-Side DataTable, Adding Super Powers To HTML Table
Run Raw Queries Securely In Laravel
Composer Install v/s Composer Update
