Lazy load Youtube Video Iframe


How to prevent loading youtube video iframe & related files until the user clicks to play the video.

Last Updated : December 26, 2019

Why not directly add youtube video iframe snippet?

Youtube’s iframe snippet brings ~500 KB (gzipped) worth of files with it. Around 85% of this is JavaScript. This will cause your video thumbnail display to be slower (look here). On mobile networks & devices, it shall also adversely affect the speed of loading other parts of the page.

Not every visitor to your page will play the youtube video. As a result, it is optimal to load the youtube video iframe files when the user clicks the play button. This how-to provides steps to do so. For the sake of this how-to, let’s assume below is your youtube iframe snippet:

<iframe style="max-width:100%" width="560" height="315" src="https://www.youtube.com/embed/e1gAyQuIFQo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Changing the iframe snippet to not load any files

An easy way to prevent the iframe snippet from loading files is to:

  • Specify the iframe’s source as ‘data-src’.
  • Add class & id to iframe to help JavaScript refer to it later.
  • Add display:none to hide it initially.

<iframe style="max-width:100%;display:none;" id="youtube-embed-iframe" width="560" height="315" data-src="https://www.youtube.com/embed/e1gAyQuIFQo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Setting up the preview thumbnail

A simple way to extract the preview thumbnail for your youtube video is to use the following URL pattern https://img.youtube.com/vi/{video-id}/mqdefault.jpg. We need to set this image as a hyperlink to load the youtube video and also have a ‘Play’ button on top of it. The below snippet does so:

<style>
.youtube {
    position: relative;
    display: inline-block;
}
.youtube:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-size: 30%;
    background: transparent url('url_for_play_button.svg') center center no-repeat;
}
</style>
<a href="javascript:void(0);" onclick="showVideo();" id="youtube-link" class="youtube" >
	<img id="youtube-thumb" src="https://img.youtube.com/vi/e1gAyQuIFQo/mqdefault.jpg" width="560" style="max-width:100%" alt="{ video title }" />
</a>

With the above code snippet, we are yet to specify how to load the youtube video on clicking the above link (via showVideo() function).

Loading & playing Youtube video on thumbnail click

Below JavaScript defines showVideo(). This function:

  • Hides the thumbnail
  • Shows Youtube iframe & sets it’s src attribute
  • Loads Youtube ifram api, which we use to auto-play the video on loading

<script>
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('youtube-embed-iframe', {
      height: '315',
      width: '560',
      videoId: 'e1gAyQuIFQo',
      events: {
        'onReady': onPlayerReady,
      }
    });
}

function onPlayerReady(event) {
        console.log('player ready');
    event.target.playVideo();
}


function stopVideo() {
    player.stopVideo();
}

function showVideo()
{
        document.getElementById('youtube-link').style.display = "none";
        document.getElementById('youtube-embed-iframe').style.display="block";
        document.getElementById('youtube-thumb').style.display="none";
        let ifr = document.getElementById('youtube-embed-iframe');
        ifr.setAttribute('src',ifr.getAttribute('data-src'))
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
</script>

Bringing it all together

Here’s a CodePen that brings into action all of the above listed code snippets for you to explore further.


Didn't find what you are looking for?


Just email your query or suggestion to punit@tezify.com and we shall do the needful.

Contact Us Image

Also Read:
Prevent Loading Hidden Images
Make sure that images hidden through 'display:none' are not downloaded by the browser. (..continue reading)



ABOUT THE AUTHOR
Punit Sethi has been working with large e-Commerce & B2C websites on improving their Site Speed & Scalability. He frequently tweets here.
Punit Sethi