Load YouTube & Dailymotion Video Player Faster & On Demand

When you embed a Youtube or Dailymotion video on your blog or website, then the video has to load a bunch of extra resources like CSS, JavaScript or images to rendering the videos. And, the bad thing about it that it always load these resources even if a visitors does not hit the play button. These resources increase not only the weight of your template but also the visitor's browser will also need to make multiple HTTP requests to render the videos.

Have you ever noticed that Google plus shows the embedded videos on their page with a different thumbnail style. Google+ only display a thumbnail image with a custom play button instead of displaying a embedded video player to make it look like a player. And, when a user clicks over the thumbnail, then the preview thumbnail is replaced by the standard video player. That means the browser loads all the resources that are required to play the video only once when necessary. And, this reduces the loading speed of your website, see demo below,

What are the advantages?

1. Reduce loading speed
2. Reduce HTTP requests on client's browser
3. Very necessary for SEO
4. Reduce weight(page-size) of your template
5. Load videos only when necessary
6. Embedded videos will be responsive

Install Plugin on your blogger template

Backup your blogger template.

1. First navigate to blogger Dashboard > Template > Edit template.
2. Then search for </body> and then copy and paste the below code just above </body>



<!-- videos load on demand script by http://www.bloggerseolab.com start -->
<script src='http://yourjavascript.com/31169646111/load-videos-on-demand.js' type='text/javascript'></script>
<style>
.video-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player, .dmn-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb, img.dmn-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto;transition:all ease-in-out 0.25s; }
img.youtube-thumb:hover, img.dmn-thumb:hover {transform:scale(1.05);transition:all ease-in-out 0.25s;}
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, #dmn-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
</style>
<!-- videos load on demand script by http://www.bloggerseolab.com end -->

3. And, then save the template.

How to embed YouTube and Dailymotion videos on blog posts?

1. Just navigate to a existing blog post or make a new post and then select to HTML view.
2. Now add the below code for embedding a YouTube video,

<div class="video-container">
   <div class="youtube-player" data-id="VIDEOID"></div>
</div>

Customize: Replace the VIDEOID with the id of your YouTube video.

3. If you want to embed a Dailymotion video, then use the below code,

<div class="video-container">
   <div class="dmn-player" data-id="VIDEOID"></div>
</div>

Customize: Replace the VIDEOID with the id of your Dailymotion video.

Frequently asked questions:

VIDEOID is mentioned in the code.

How to find the video id of a YouTube video?

Just copy and paste the video URL of your YouTube video in Notepad. And you can see a combination of numbers and letters after an equal sign. This is your video ID. see below URL.

https://www.youtube.com/watch?v=-ZWGpOSS6T0

How to find the video id of a Dailymotion video?

Find a Dailymotion video which you like to embed. Here is an example

http://www.dailymotion.com/video/x8oma9_warp-whistle_shortfilms

In this example, the ID would be x8oma9 as you can see above.

Wrapping up

The idea to load Dailymotion videos on demand is taken from Labnol. They already made a tutorial for embedding YouTube videos on demand while keep it responsive. So, I have made some changes to the JavaScript code for adding support to Dailymotion videos also.

The whole idea for embedding videos on demand is taken form Google plus. We only made it possible for blogger or website for reducing loading speed which is a significant factor for calculating page rank..

Thank You. I hope that you will like our work and also appreciate it by sharing on social networks.