A Better Way to Embed YouTube Videos on your website

It’s easy to embed a YouTube video but you will be surprised to know how much additional weight you can add to YouTube web pages. In order to present the YouTube video player alone, the browser has to download half MB of additional javascript files (see screenshot). And these files are downloaded even when the visitor never runs embedded video.

Embedded video not only increases the byte size of your web pages, but the browser has to make several HTTP requests to present the video player. This affects the page loading speed of your page’s overall loading time. The other flaw with default YouTube embed code is that it is not responsive. If people see your website on a mobile phone, then the video player can not resize properly for a small screen.

Embed YouTube Video Without Increasing the Page Size

Google+ uses a clever technique to embed YouTube videos – it just embeds the thumbnail image of YouTube video and the actual video player loads only when a user clicks on the thumbnail manually.

YouTube thumbnail images are about 15 kb size, so we are able to reduce the byte size of web pages by 500+ kb. that’s huge!

codepencode here

The video above is embedded using the same on-demand technique (demo).

When a visitor clicks the play button, the thumbnail image is replaced with the standard YouTube video player, with Autoplay set 1, so the video runs immediately. The advantage is that additional YouTube Javascript loads only when someone clicks the embedded video and otherwise does not.

Light and Responsive YouTube Embeds

The standard embed code for YouTube uses the IFRAME tag, and the video player’s width and height is hard-coded, making the player non-responsive.

The new on-demand embed code for YouTube is slightly different. You do not have to specify the player size because we are now actively embedding the video. Also, IFRAME has been replaced with a DIV tag and IFRAME is added only on the page when the visitor clicks the play button.

Standard YouTube embed code

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/Video_ID” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen> </iframe>

Responsive and Light YouTube embed code

<div class=“youtube-player” data-id=“VIDEO_ID”> </div>

Embed YouTube Videos Responsively – Tutorial

Copy-paste the following snippet anywhere in your web page where you want to show YouTube videos. Remember to replace the VIDEO_ID with the original ID of the YouTube video.
<div class=“youtube-player” data-id=“VIDEO_ID”> </div>
We will not specify height and width because the video player will automatically capture the parent’s width during automatic calculation. If you need to embed multiple videos on the same page, then you can paste multiple DIV blocks with different video IDs.

After this, place javascript anywhere in your web template. It finds all embedded videos on a web page and then replaces DIV elements with video thumbnails.

Finally, paste the CSS before the closing head tag of your web template.

This method will reduce the size of your web pages to 500 KB while making your site mobile friendly. To understand how on-demand embedding works, you can specify the annotated code.

Please note that Chrome and Safari browsers on iPhone and Android only allow playback of HTML5 video when launched by user interaction. They block embedded media from automatic playback to prevent unwanted downloads on cellular networks.

Share on:

Hello, I am Dharmendra Yadav and I am a Python Developer with experience in web development using Django, Flask, REST API, SQL, MySQL, HTML, CSS, JavaScript, WordPress, Oracle Cloud, AWS and Git. I also write technical articles where I explain web development and Software Engineering. Facebook , Linkedin