The popularity and demand for video content are ever-increasing. According to Statista, 85% of internet users watch online video content on any device. Another study by HubSpot found that 54% of consumers want to see video content from a brand or business they support.
But, adding a lot of video content to your site can make your site perform slow. Even the embedded YouTube videos can also do the same if your site isn’t optimized to handle them properly.
This is one of the major reasons that having such valuable video content some web pages are constantly losing their potential customers. Thus, here in this guide, I’ll share how does embedding YouTube videos slow down your website along with the fixes. So, to learn in detail, let’s get into this guide.
Does Embedding YouTube Videos Slow Down Your Website?
People spent 2.6x more time on a page that has video content on it. It’s a great opportunity for every site owner to make great conversions and lead. But, does embedding YouTube videos slow down your website?
Well, you’ll get this answer here. When you embed a YouTube video on your site, browsers of your visitors required to make extra requests to render your page. The browser has to load 785 KB of data for only rendering the YouTube video. Even, a single YouTube embed can make 21 HTTP requests.
In fact, these files started to download even after the visitor clicked the play button. The embedded YouTube videos do increase your web page’s byte size and lead the browsers to make multiple HTTP requests to render the video player.
These YouTube videos render a video player of fixed dimensions which is not responsive enough. Another drawback is the YouTube URLs or iframe code bloats the page size negatively. This way, these videos increase the overall loading time and affect the core web vital scores, which results in slow loading speed.
How to Embed YouTube Videos Without Impacting Page Speed?
Using embed YouTube content is a great way to improve user experience and keep them engaged for a longer time. But, this only is possible when you optimize your videos properly so that they won’t impact the page speed.
You can use any one of the following methods to optimize your embedded YouTube videos. And make sure to use these codes on your child theme first, to see how it works. So, here’s how to optimize your embed YouTube videos-
1. Applying the Light and Responsive YouTube Embed Mode
The advantage of using light and responsive coffee is that, with this, the additional JS will load only when the user clicks on the play button to watch the video and not before that.
Step 1: HTML Snippet
So, at first, copy the following HTML snippet and paste where you want the YouTube video to appear on your page. Make sure to replace the “VIDEO_ID with your actual YouTube video ID.
<div class="youtube-player" data-id="VIDEO_ID"></div>
Step 2: JavaScript Snippet
Now, copy the following code snippet and paste it anywhere in your web template. This script will find all the embedded videos on your web page and replace the DIV elements with the video thumbnails and a play button.
<script>
/*
* Light YouTube Embeds by @labnol
* Credit: https://www.labnol.org/
*/
function labnolIframe(div) {
var iframe = document.createElement('iframe');
iframe.setAttribute(
'src',
'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0'
);
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', '1');
iframe.setAttribute(
'allow',
'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
);
div.parentNode.replaceChild(iframe, div);
}
function initYouTubeVideos() {
var playerElements = document.getElementsByClassName('youtube-player');
for (var n = 0; n < playerElements.length; n++) {
var videoId = playerElements[n].dataset.id;
var div = document.createElement('div');
div.setAttribute('data-id', videoId);
var thumbNode = document.createElement('img');
thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace(
'ID',
videoId
);
div.appendChild(thumbNode);
var playButton = document.createElement('div');
playButton.setAttribute('class', 'play');
div.appendChild(playButton);
div.onclick = function () {
labnolIframe(this);
};
playerElements[n].appendChild(div);
}
}
document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script>
Step 3: CSS Code Snippet
Lastly, before closing your web template’s head tag, simply copy and paste the following CSS code snippet.
<style>
.youtube-player {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}
.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.youtube-player img {
object-fit: cover;
display: block;
left: 0;
bottom: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
transition: 0.4s all;
}
.youtube-player img:hover {
-webkit-filter: brightness(75%);
}
.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url('//i.imgur.com/TxzC70f.png') no-repeat;
cursor: pointer;
}
</style>
For better understanding, you can use this Codepen Page to view the light YouTube embed technique in action.
2. Lazy Loading Embedded YouTube Videos
This process allows your YouTube videos to play when the user asks to do so, instead of losing the videos as soon as the page starts to load.
The method of doing this is popularly known as lazy loading, which minimizes the HTTP requests on the initial Page load. This way it helps to improve your site speed performance. So, let’s start with the processes-
Step 1: HTML Structure
Use the following code snippet and make sure to replace your YouTube video ID with the “AqcjdkPMPJA” attribute.
<!-- (1) video wrapper -->
<div class="youtube" data-embed="AqcjdkPMPJA">
<!-- (2) the "play" button -->
<div class="play-button"></div>
</div>
Step 2: CSS Structure
Next, add the following CSS-
.youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.youtube img {
width: 100%;
top: -16.84%;
left: 0;
opacity: 0.7;
}
.youtube .play-button {
width: 90px;
height: 60px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.youtube .play-button:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
Step 3: JavaScript Code
Now, use the following scripts to fetch the image thumbnail based on the YouTube ID that you’ve added on the data-embed attribute. To start, select the div element to wrap the embedded video with the youtube class.
var youtube = document.querySelectorAll( ".youtube" );
With more than 2 or 3 videos, you should iterate through each of the selected elements.
...
for (var i = 0; i < youtube.length; i++) {
// add the code here
}
Next, retrieve the YouTube image thumbnail and display it by specifying the ID in data, and retrieve it using the .dataset property.
// loop
for (var i = 0; i < youtube.length; i++) {
// thumbnail image source.
var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
}
Another way is loading image thumbnails Asynchronously, which allows the page to load much faster. It will help the image thumbnail to load from the source variable.
// loop
for (var i = 0; i < youtube.length; i++) {
...
// Load the image asynchronously
var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
youtube[ i ].appendChild( image );
}( i ) );
}
The final step is to add the last piece of the script with the following code snippet.
// loop
for (var i = 0; i < youtube.length; i++) {
...
youtube[i].addEventListener( "click", function() {
var iframe = document.createElement( "iframe" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
this.innerHTML = "";
this.appendChild( iframe );
} );
}
So, here is the final JavaScript code-
( function() {
var youtube = document.querySelectorAll( ".youtube" );
for (var i = 0; i < youtube.length; i++) {
var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
youtube[ i ].appendChild( image );
}( i ) );
youtube[i].addEventListener( "click", function() {
var iframe = document.createElement( "iframe" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
this.innerHTML = "";
this.appendChild( iframe );
} );
};
} )();
Conclusion
Video content is a powerful marketing tool that helps to drive traffic, increase conversions, and leads. In fact, 78% of people said that video content helps to increase sales directly.
Embedding YouTube videos leads to longer sessions duration and higher engagement of users. It is a great way to rank on Google and YouTube SERPs. All these only can be possible if your site speed performance is good.
In this guide, I’ve shared does embedding YouTube videos slow down your website along with the fixes. Remember, as long as your site and media files are optimized accurately, adding videos will put a minimal impact on your site performance.
Hopefully, you have liked this guide, and if so do share your thoughts with me by commenting below.
