The embedded video is making your page heavy and the visitor’s browser will also need to make multiple HTTP requests to render the video player. This increases the overall loading time of your page and thus affects the page speed score. The other drawback with the default YouTube embed code is that it isn’t responsive. If people view your website on a mobile phone, the video player would not resize itself accordingly.
Load YouTube Video Player On-Demand
Google Plus uses a clever workaround to reduce the time it takes to initially load the YouTube video player and we can incorporate a similar approach approach for our websites as well.
Instead of embedding the full Youtube video player, Google+ displays just the thumbnail images of a YouTube video and a “play” icon is placed over the video so that it looks like a video player. The following video is embedded using the same technique:
When the user hits the play button, the video thumbnail is replaced with the standard YouTube video player with autoplay set to 1 so it plays the video instantly. The extra player-specific resources are thus loaded only when the user has decided to play the embedded video and not otherwise.
The regular embed code for YouTube looks something like this. You specify the height of the player (in pixels), the width and the unique ID of the YouTube video.
Embed YouTube Videos Responsively without Increasing Load Time
The on-demand embed code for YouTube is slightly different since we are now embedding the video responsively and also because the IFRAME embed code is added only then user clicks the play button.
You can copy-paste multiple blocks on the same page incase you need to embed multiple videos on the same page. The code will stay the same except that you need to change the VIDEOID for each of the blocks.
Open the CSS file of your website and paste the following snippet. If you don’t have a separate CSS file, you can also place it before the closing head tag of your web template.
This method will reduce the size of your webpages by 300-400 KB while making your site mobile friendly. You may refer to the annotated code to understanding how on-demand embedding works.
Also see: Embed Google Maps Responsively