Is there a way to load embedded YouTube videos faster on my website?

Question

I\'m writing a blog post that uses multiple videos from YouTube and Yahoo Video, but I\'m not happy with how long it takes the page to render. Apart from using an ajax-y met

Answer 1

Your "ajax-y method"s will be the only way to speed this up. Large sites are going to be using a CDN and have good caching. There is no way around large files taking a long time...

Keeping the object or video tag out of the HTML and then adding it after page load, will improve perceived page load performance. Perhaps swap out an screengrab image that is the same size as the eventual video...

It's early days for the video tag, but it's possible that eventually it's initialization time will be faster than Flash, since it's part of the browser and not a 3rd party plugin.

The bulk of the video load time depends on how the video was encoded/transferred which is out of your control, it sounds like.

Answer 2

The Google Plus solution is the only way to improve performance: load an image stub, then load the full player when the user clicks.

Building on the solution from @boscharun here is the solution I use:

<style>
div.video-container a img.playbutton {visibility: hidden;
  content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAABNCAQAAABJACE7AAAEvklEQVR4AdyYX0hbVxzHv5CH4kMZVUighTLxKXmMCBGF/MKC26Qy5x6njMEsGCgU8zBQygaDsJVC2IOCoIPhAqtjbFxmXsJl4EPgPpSGhTDSQDPXEbUNRSpGZ/6cwSHk5MaYa8498WGf39sVrt/c8/vz/R38X+mDE4PwwAsfxuEHwY9x+OCFB4Nwog9XjgMuuDEKsoxRuOGCA1fCADwg8Jic2VwyNvKJYvq4cHZULbNatXx2dFwopvMJY2NzaXKmIdGDAfSUWxgB/1cri5mtN8+ZJW+eZ7ZWFuvyRnALPeEmfCDQwmwqVjpgXVE6SMUWZrk8H25CKTfgBYEioV2dSbOrR0Jcnhc3oIgh8K+VTzDb5BP1rzcE21zHMAhkbLC2HD7Lanp0NRyaG5vqDzoC/cGxqdDcaliPZrXDZ6wtxgYXN4zrsIELftDyfDHNzvFiR4tMTIM6xcS0Fnmxw85RTC/P8x7ogiS3QaD4Q1ZrSeq95JpZlJXA5Fppj5mpxR/yv96GBIMgUCrGTJy81KMgmdCjJy+ZiVSM/2VQSlgu3voyZxAkG85g6w/NxbsXx48ynzAn/KN7ILvx6J65OPKJ7o7Vdf6L5bavBUAq4logt93my7ku1y78rTlmrINUhrF+Luf8l2klw7wqm5BMfIuiYE3wah2+ROdfnmc1eWFS4mq8zw11npUEKqZlj1L+WItp/qzDbPWaR1JuG9TLyG23jC/vxbaHFmab24X9qrSq1uZWwgf/BZbJZ+5lEn1Mos+19DhfewdLkZC5pC+KfeP+J4rEmdoU93NtnPAIaFcXs7LTSGKsWvnz1/c+VCHNGRSzdVfnNr2FAZFn1i2DccolY/3td9W2EZ5vAzDhaf60pb3OL2t2/T9/5bBdLKU9Uxp5zHslgcQyklyzliZ4neE5YiOSa+Kn8icO00BfWWQNrIwia6X29++ffSwvbWKaNVhZNA97NyizJaw1qCtpnEo5/Xjkjqw4YdMzWyC40WAUJBZeLSIhjfPvoR596x0ZaVpELNUgjIpLFZqcMR2npDT+6r+++9zekfLriD5wnKDNJTGeQHLSBK+ecifRVYiRtbkEgrOxB4ihntXkpQmqtVz8zkfdSMtqYtCLfcHTPDv1qH1pMi1Zj4pZKnqbt9mjrYZVSBN96revL+dfVsMm7+ZtOI7jAqsTmlMlTWTvt/et3xmaY3WOC8KBjIPOjlidsSnF0jj/7Fi15LEpVufsCIRxcPygapnV6Q/alybTkvuDjRIq8w2LQyCxqDgCvZFWrWU1+uDidzoCYuzxJ1f11V5nvrgLEmH91Xqfa3x8xb/hVSqRaz2rUO6Gf+EZJlGhvetr4oqP5PtaT6bBaVGLiJKSnQbKZ2i1kvlJHKP8DFXuPF49DX8Ksu88FPu106JYY+z7NWUut1L+40f3+yAVLlfpbnDwhG/0yncDmxtV6eDxlyD1G5XNPbRSTv0gjlH9Hiq9ve8bd2dB6rd3m3cepf3YA1Bv7zwkbooqp0++F75f/U2R9P1aIck965Xdr/3XrB0IAAAAMAzyt06jY3zFr2T95T4P+N8N/tryN6q67MU9tK7ITXv/xcLvPH4d85uiWmLlfq1Wf7mVfIVp4HIDzfwP/+fzW/C0yiYAAAAASUVORK5CYII=")
}
div.video-container a:hover .playbutton {visibility: visible;}
</style>              

<div class="video-container">
  <a style="position: relative; left: 0; top: 0;" href="https://www.youtube.com/watch?v=IJl2C8QPVjQ&amp;rel=0">
    <img src="//img.youtube.com/vi/IJl2C8QPVjQ/0.jpg" style="position: relative; top: 0; left: 0; width:100%; height:auto">
    <img class="playbutton" style="position: absolute; top: 50%; left: 50%; margin-left:-38px; margin-top:-38px">
  </a>
</div>

<script>
$('.video-container').click(
  function(e){
    e.preventDefault(); 
    var imgURL = $(this).find("img").attr('src');
    var rx = /\/vi\/([^\/]+)/
    var arr = rx.exec(imgURL);
    var url = "//www.youtube.com/embed/"+arr[1]+"?rel=0&autoplay=1";
    $(this).find("img").hide();
    $(this).append('<iframe width="100%" height="315" src="'+url+'" frameborder="0" allowfullscreen></iframe>');
  }
);
</script>                      

You can see it in action live at: https://www.acls.net/videos.htm

Features include:

• Degrades to IMG if necessary
• Semantic
• Responsive
• Uses jQuery

Answer 3

The problem with embedded YouTube videos is that the player itself needs to load. You could add "controls=2" in the URL of the embedding code, but that would make only AS2/3 players to load the player after clicking.

The workaround Google+ has for this issue is not to load the player at all. Instead, it loads a thumbnail image with a play button superimposed. On clicking, the image is replaced with the actual YouTube player iframe embed code and it loads and auto-plays.

This can be done in any site actually using the simple javascript below. https://skipser.googlecode.com/files/gplus-youtubeembed.js

Answer 4

There is no question getting multiple videos from different websites takes time. Have you tried obtaining a copy of those videos, upload it to your web server and embed your videos that way? It may increase rendering speed of your pages if the videos come from a single source.

Answer 5

You can follow the instructions from: https://varvy.com/pagespeed/defer-videos.html

just instead of using the code like this :

<iframe width="560" height="315" src="" data-src="//www.youtube.com/embed/OMOVFvcNfvE" frameborder="0" allowfullscreen></iframe>

I would change by :

<iframe width="560" height="315" data-src="//www.youtube.com/embed/OMOVFvcNfvE" frameborder="0" allowfullscreen></iframe>

Because, the src="" could be interpreted as src="/" on some browsers, which will load a copy of your site into the iframe...