
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.
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.
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
NOTE: Code available at GitHub Lazy Load YouTube And Other Videos In Website
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>
Responsive CSS to load youtube videos.
.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%;
}
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.
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);
}
If you need any YouTube video thumbnail then you can use the following URLs. Make sure to just replace your YouTube video-id.
https://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg
https://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
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.
Proper Way To Validate MIME Type Of Files While Handling File Uploads In PHP
Free Live Chat Integration Using TAWK.IO
SummerNote WYSIWYG Text Editor Save Images To Public Path In PHP Laravel
Test Your Local Developing Laravel Web Application From Phone Browser Without Any Software
Send Email In PHP With PHPMailer
Free SSL Certificate For CPanel
Integrate Google Translate Into Your Website
Generate Sitemap in PHP Laravel
Basic Server Security Setup For Ubuntu / Linux
Securely Connect Server MYSQL DB From Sequel Pro / MYSQL Workbench
PHP Built-In Web Server & Testing Your Development Project In Mobile Without Any Software
Sass or SCSS @mixin vs @extends vs Placeholder (%)
Resolve 404 Not Found In NGINX
Securely SSH Your Server & Push Files With FileZilla
Install Apache Web Server On Ubuntu 20.04 / Linux & Manage It