Method to Embed YouTube Videos on Your Website

It’s easy to embed a YouTube video, but you’ll be surprised how much additional weight YouTube’s video will add to your web pages. The browser has to download about half Mb of additional JavaScript files to convert the YouTube video player alone. And these files are downloaded even if the visitor does not play the embedded video.

The embedded video will not only increase the bytes size of your web pages, but the browser will have to make several HTTP requests to process the video player. This will increase the total load time of your page, therefore, will affect the page speed score. The other downside to YouTube’s default encoding code is that it does not respond. If people see your website on a mobile phone, it is possible that the video player does not resize correctly for the small screen.

Method to Embed YouTube Videos on Your Website

Method to Embed YouTube Videos on Your Website

Embedding YouTube videos without increasing page size

Google+ uses a clever technique to embed YouTube videos: it simply embeds the thumbnail image of a YouTube video and also the actual video player is uploaded only the user manually clicks on the thumbnail.

YouTube thumbnails are approximately 15 KB in size, so we can reduce the byte size of web pages by more than 500 KB. That’s huge!

When a visitor clicks the play button, the thumbnail image is replaced with the standard YouTube video player with autoplay set to one, so it plays the video instantly. The advantage is that the additional YouTube JavaScript is loaded only when someone decides to see the embedded video and not otherwise.

Light and Responsive YouTube Playbacks

The standard YouTube insertion code uses the IFRAME tag, and the width and height of the video player are also encoded so that the player does not respond.

The new on-demand insertion code for YouTube is slightly different. You do not want to specify the size of the player, as we are currently incorporating the video responsibly. In addition, the IFRAME is replaced by a DIV tag and the IFRAME is added to the page only if the visitor clicks the play button.

Method to Embed YouTube Videos on Your Website

Method to Embed YouTube Videos on Your Website

 

Embed YouTube videos responsibly – Tutorial

Copy and paste the following snippet anywhere on your web page wherever you want the YouTube video to appear. Note that you must replace VIDEO_ID with the current ID of the YouTube video.

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

We can not assign height and width, since the video player will automatically occupy the width of the parent while the height is calculated automatically. Several DIV blocks with different video IDs will be pasted if you want to integrate multiple videos on the same page.

Then place the JavaScript anywhere on your web template. Find all the videos embedded in a webpage and then replace the DIV elements with the video thumbnails.

<script>
/* Light YouTube Embeds by @lifenan */
/* Web: http://www.lifenan.com/embedding-youtube-videos */
document.addEventListener(“DOMContentLoaded”,
function() {
var div, n,
v = document.getElementsByClassName(“youtube-player”);
for (n = 0; n < v.length; n++) {
div = document.createElement(“div”);
div.setAttribute(“data-id”, v[n].dataset.id);
div.innerHTML = lifenanThumb(v[n].dataset.id);
div.onclick = lifenanframe;
v[n].appendChild(div);
}
});

function lifenanThumb(id) {
var thumb = ‘<img src=”https://i.ytimg.com/vi/ID/hqdefault.jpg”>’,
play = ‘<div class=”play”></div>’;
return thumb.replace(“ID”, id) + play;
}
function lifenanIframe() {
var iframe = document.createElement(“iframe”);
var embed = “https://www.youtube.com/embed/ID?autoplay=1”;
iframe.setAttribute(“src”, embed.replace(“ID”, this.dataset.id));
iframe.setAttribute(“frameborder”, “0”);
iframe.setAttribute(“allowfullscreen”, “1”);
this.parentNode.replaceChild(iframe, this);
}

</script>

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

This method can reduce the size of your web pages by 500 KB while creating your mobile site friendly. It will refer to the annotated code to understand how on-demand scaling works.

<style>
 .youtube-player {
 position: relative;
 padding-bottom: 56.23%;
 /* Use 75% for 4:3 videos */
 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 {
 bottom: 0;
 display: block;
 left: 0;
 margin: auto;
 max-width: 100%;
 width: 100%;
 position: absolute;
 right: 0;
 top: 0;
 border: none;
 height: auto;
 cursor: pointer;
 -webkit-transition: .4s all;
 -moz-transition: .4s all;
 transition: .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>

Please note that Chrome and Safari browsers on iPhone and Android only allow HTML5 video playback once initiated by a user interaction. Block embedded media from autoplay to prevent unsolicited downloads over cellular networks

LEAVE A REPLY

Please enter your comment!
Please enter your name here