Geek Answers Handbook

Is there a way to upload embedded YouTube videos faster on my site?

I am writing a blog post that uses several videos from YouTube and Yahoo Video, but I am not happy with how long it takes to render the page. Besides using the ajax-y method to upload videos, are there any tricks that speed up page loading with multiple videos from different sources?

+6
optimization javascript video
source share
5 answers

Your “ajax-y method” will be the only way to speed this up. Large sites are going to use CDN and have good caching. There are not many ways to store large files ...

Saving an object or video tag from HTML, and then adding it after the page loads, will improve the perceived page load performance. Perhaps swap the screengrab image to be the same size as the possible video ...

These are the first days for the video tag, but it is possible that in the end, its initialization time will be faster than Flash, since this is part of the browser, and not a third-party plug-in.

Most of the video download time depends on how the video was encoded / transmitted, which is out of your control, it sounds.

+1
source share

The problem with embedded YouTube videos is that the player itself needs to load. You can add “controls = 2” to the embed code URL, but that would only allow AS2 / 3 players to load the player after clicking.

The Google+ workaround for this issue is not to download the player at all. Instead, it loads a thumbnail with a play button on it. When clicked, the image is replaced with the actual iframe embed code on YouTube and is downloaded and automatically played.

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

+9
source share

There is no doubt that getting multiple videos from different sites takes time. Have you tried to get a copy of these videos, upload it to your web server and embed the video in it? This can increase the speed of rendering your pages if the video comes from a single source.

+1
source share

The Google Plus solution is the only way to improve performance: download the image dummy, and then download the full player when the user clicks.

Based on the solution from @boscharun, here is the solution I am using:

<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: https://www.acls.net/videos.htm

Features include:

  • IMG degrades if necessary
  • Semantic
  • Adaptive
  • Uses jQuery
+1
source share

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

rather than use the following code:

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

I would change:

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

Because src = "can be interpreted as src =" / "in some browsers, which will load a copy of your site in an iframe ...

-one
source share

More articles:


All Articles