Embedding youtube videos obviously brings a more attractive appeal to your post and hence decreases the bounce rate of your blog as people tend to spend more time on that post by watching that video, well but still embedding youtube videos the traditional iFrame way can increase your HTTP request and hence decrease the speed of your post.
- Speed Up Your YouTube Videos Enjoy with no Buffering
- Embed your YouTube Videos inside a Television Frame
- 10 Awesome YouTube URL Tricks to Optimize Experience
Well Mr. Amit Agarwal from labnol display's a very efficient way for embedding youtube videos onto your blog as used by Google+ to manage and optimize their speed.
This new way can fetch the thumbnail of that video and does not request anything else unless someone clicks on it to get the video playing. So when someone clicks on the video the video will be fetched and playback will begin.
Load YouTube Video's when Someone Clicks
So now lets see how to load any youtube video on if the person wants to watch it, so if he clicks on that video, it will load and video playback will be started.
- Open Blogger > Template > Edit HTML.
- Press Ctrl + F & search for
]]></b:skin>& paste below CSS above it. (if you are on any other platform, simply paste the CSS in your style file)..youtube-container{display:block;margin:1px auto 4px;width:100%}.youtube-player{display:block;width:100%;padding-bottom:56.25%;overflow:hidden;position:relative;width:100%;height:100%;cursor:hand;cursor:pointer;display:block}img.youtube-thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;position:absolute;right:0;top:0;height:auto}div.play-button{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;background:url(http://i.imgur.com/TxzC70f.png) no-repeat}#youtube-iframe{width:100%;height:100%;position:absolute;top:0;left:0}
- Now again search for
</body>tag & paste below JavaScript code above it.<script>(function(){var v=document.getElementsByClassName("youtube-player"); for (var n=0; n < v.length; n++){var p=document.createElement("div"); p.innerHTML=labnolThumb(v[n].dataset.id); p.onclick=labnolIframe; v[n].appendChild(p);}})(); function labnolThumb(id){return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';}function labnolIframe(){var iframe=document.createElement("iframe"); iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("id", "youtube-iframe"); this.parentNode.replaceChild(iframe, this);}</script>
- That's it now JavaScript and CSS are in place, now its time to use the embed code and display the youtube video.
- Now just use the below code where ever you wanna display the youtube video, like you did with the iFrame code.
<div class="youtube-container">
<div class="youtube-player" data-id="xxxxxxxxxxx"></div>
</div> - Make sure to change the xxxxx with your youtube video ID.
So now your video will be up and running, try to refresh the post and see the difference in speed, now press the play button on that video and see how the original video loads.
(COMMENTS WILL LOAD AUTOMATICALLY)