Embedding YouTube videos in any webpage is great, it enhances your content and helps your reader to view your content in a much broader way. Either you are a blogger or just a website creator embedding YouTube videos in your blog is a must step for engaging good readership, as they need a nice way to learn new things.
Now you face a lot of issues while embedding a YouTube video, if the person’s internet speed is slow then YouTube videos might not load parallel to all that content. So he won’t be able to see content and hence he will leave your blog that will effect the bounce rate of your blog and decrease SEO rankings.
Embedding YouTube Videos Responsibly to Reduce Blog’s Loading Speed
Today we are going to solve that slow YouTube videos loading problem and hence embed all the videos from YouTube responsibly or hence better word to say would be in optimized way to increase your blog’s loading speed.
What we will be doing is to implement a script created by Amit Agarwal from Labnol.org that will fetch on the the first image from the video and will load the entire video on demand. Yes with this if the person really wants to see the video he will click the video and then original YouTube player will get loaded.
For demo purpose, check below video I have embedded using this script. You just need to click the below video to get it fully loaded and then you can watch it easily.
Embed YouTube Videos on Blogger without Decreasing Blog’s Loading Time
So lets check out how to solve that slow youtube video loading option and embed youtube videos responsibly on your blogger, wordpress or any other website easily.
- Open Blogger > Template > Edit HTML.
- Press
Ctrl +F and search for]]></b:skin>tag and paste below CSS styling above it. If you have removed default CSS bundles from blogger then you need to paste the code above </style> tag..youtube-container{overflow:hidden;display:block;margin:20px auto;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;transition:all .2s ease-in-out}img.youtube-thumb:hover{transform:scale(1.1)}div.play-button{height:75px;width:75px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhp5_V0GlKJm4piEc5I3zFoobWEzj5WvFEx1RvGTBnvPXtmzvimryMV8fnVsswA5-DiqbK-wNuvkXUo62caLU0svXhK6VvDv1zn5_cp2sbz_KLXTDa_jITm1A1QCB8XVgdoozY9ba83KPK/s1600/Y-Play-Button.png") no-repeat}#youtube-iframe{width:100%;height:100%;position:absolute;top:0;left:0}
- Now your CSS styling is pasted, its time to add the script that will do the whole work.
- Once again press
Ctrl +F and search for</body>tag and paste the below script above it.<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>
<script>(function(){var v=document.getElementsByClassName("youtube-player"); for (var n=0; n < v.length; n++){var p=document.createElement("div"); p.innerHTML=tricksladderThumb(v[n].dataset.id); p.onclick=tricksladderIframe; v[n].appendChild(p);}})(); function tricksladderThumb(id){return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';}function tricksladderIframe(){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=1&modestbranding=1"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("id", "youtube-iframe"); this.parentNode.replaceChild(iframe, this);}</script>
- If you already use jQuery then remove the above RED line from the script else leave it with the script, as it is required for the full working of the script.
- Now save your template and all the codes are pasted for this trick to work, now you just need the embed code that you will be using in every post for showing your videos.
<div class="youtube-container"><div class="youtube-player" data-id="xxxxxxxxxxxx"></div></div>
- Everytime you need to show any YouTube video in any post instead of normal Embed or iFrame code, you need to paste the above code and make sure to change the RED XXXXX with the video code.
That's it, now your youtube videos are embedded properly and will not slow down your blog post while its loading. With this you can embed any number of videos in your blog and all the videos will only load when user wants them too.
(COMMENTS WILL LOAD AUTOMATICALLY)