Skip to main content

A Better Method for Embedding YouTube Videos on your Website

Embed YouTube Videos without Increasing Page Size

Google+ uses a clever technique for embedding YouTube videos – it just embeds the thumbnail image of a YouTube video and the actual video player is loaded only when the user manually clicks the thumbnail.

YouTube thumbnail images are about 15 kB in size so we are able to reduce the byte size of web pages by 500+ kb. That’s huge!

The video above is embedded using the same on-demand technique (demo).
When a visitor clicks the play button, the thumbnail image is replaced with the standard YouTube video player with autoplay set to 1 so the plays the video instantly. The advantage is that the extra YouTube JavaScript gets loaded only when someone decides to watch the embedded video and not otherwise.

Light and Responsive YouTube Embeds

The standard embed code for YouTube uses the IFRAME tag and the width and height of the video player are hard-coded thus making the player non-responsive.
The new on-demand embed code for YouTube is slightly different. You need not specify the player size as we are now embedding the video responsively. Also, the IFRAME is replaced with a DIV tag and the IFRAME is added to the page only when the visitor clicks the play button.

Embed YouTube Videos Responsively – Tutorial

Copy-paste the following snippet anywhere in your web page where you would like the YouTube video to appear. Remember to replace VIDEO_ID with the actual ID of the YouTube video.
We will not assign height and width since the video player will automatically occupy the width of the parent while the height is auto-calculated. You can paste multiple DIV blocks with different video IDs if you need to embed multiple videos on the same page.
Next, place the JavaScript anywhere in your web template. It finds all embedded videos on a web page and then replaces the DIV elements with the video thumbnails.
  1. <script>
  2.  
  3. /* Light YouTube Embeds by @labnol */
  4. /* Web: http://labnol.org/?p=27941 */
  5.  
  6. document.addEventListener("DOMContentLoaded",
  7. function() {
  8. var div, n,
  9. v = document.getElementsByClassName("youtube-player");
  10. for (n = 0; n < v.length; n++) {
  11. div = document.createElement("div");
  12. div.setAttribute("data-id", v[n].dataset.id);
  13. div.innerHTML = labnolThumb(v[n].dataset.id);
  14. div.onclick = labnolIframe;
  15. v[n].appendChild(div);
  16. }
  17. });
  18.  
  19. function labnolThumb(id) {
  20. var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
  21. play = '<div class="play"></div>';
  22. return thumb.replace("ID", id) + play;
  23. }
  24.  
  25. function labnolIframe() {
  26. var iframe = document.createElement("iframe");
  27. var embed = "https://www.youtube.com/embed/ID?autoplay=1";
  28. iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
  29. iframe.setAttribute("frameborder", "0");
  30. iframe.setAttribute("allowfullscreen", "1");
  31. this.parentNode.replaceChild(iframe, this);
  32. }
  33.  
  34. </script>
Finally, paste the CSS before the closing head tag of your web template.
This method will reduce the size of your web pages by 500 KB while making yoursite mobile friendly. You may refer to the annotated code to understanding how on-demand embedding works.
  1. <style>
  2. .youtube-player {
  3. position: relative;
  4. padding-bottom: 56.23%;
  5. /* Use 75% for 4:3 videos */
  6. height: 0;
  7. overflow: hidden;
  8. max-width: 100%;
  9. background: #000;
  10. margin: 5px;
  11. }
  12. .youtube-player iframe {
  13. position: absolute;
  14. top: 0;
  15. left: 0;
  16. width: 100%;
  17. height: 100%;
  18. z-index: 100;
  19. background: transparent;
  20. }
  21. .youtube-player img {
  22. bottom: 0;
  23. display: block;
  24. left: 0;
  25. margin: auto;
  26. max-width: 100%;
  27. width: 100%;
  28. position: absolute;
  29. right: 0;
  30. top: 0;
  31. border: none;
  32. height: auto;
  33. cursor: pointer;
  34. -webkit-transition: .4s all;
  35. -moz-transition: .4s all;
  36. transition: .4s all;
  37. }
  38. .youtube-player img:hover {
  39. -webkit-filter: brightness(75%);
  40. }
  41. .youtube-player .play {
  42. height: 72px;
  43. width: 72px;
  44. left: 50%;
  45. top: 50%;
  46. margin-left: -36px;
  47. margin-top: -36px;
  48. position: absolute;
  49. background: url("//i.imgur.com/TxzC70f.png") no-repeat;
  50. cursor: pointer;
  51. }
  52.  
  53. </style>
Please do note that Chrome and Safari browsers on iPhone and Android only allow playback of HTML5 video when initiated by a user interaction. They block embedded media from automatic playback to prevent unsolicited downloads over cellular networks.

Comments

Popular posts from this blog

Gujarat Government Jobs 2017 | Apply Latest Govt Jobs in Gujarat

Gujarat Government Jobs 2017
Gujarat Government provides no.of opportunities to the candidates who were preparing to get Gov job in Gujarat. Every year Gujarat Government releases recruitment notifications for all available Government Jobs in Gujarat. GujaratGovernment provides opportunities for all types of job seekers by releasing notifications Periodically. Candidates check State Govt jobs in Gujarat and Government Jobs Notifications in Gujarat on our website.

Click Here

Top WhatsApp funny videos

Xiaomi Redmi Note 4 हुआ सस्ता

Xiaomi Redmi Note 4 फोन में 5.5 इंच (1920 x 1080 पिक्सल) फुल एचडी 2.5डी कर्व्ड ग्लास डिस्प्ले दिया गया है। फोन में स्नैपड्रैगन 625 प्रोसेसर का इस्तेमाल हुआ है। ग्राफिक्स के लिए एड्रेनो 506 जीपीयू है। फोन में हाइब्रिड सिम स्लॉट है, यानी दूसरा सिम स्लॉट एसडी कार्ड स्लॉट की भी भूमिका निभाएगा। यूज़र 128 जीबी तक का माइक्रोएसडी कार्ड इस्तेमाल कर सकेंगे।




इसके रियर कैमरे का सेंसर 13 मेगापिक्सल का है जो एफ/2.0 अपर्चर, डुअल-टोन एलईडी फ्लैश व पीडीएएफ से लैस है। सेल्फी के शौकीनों के लिए अपर्चर एफ/2.0, 85-डिग्री वाइड एंगल लेंस के साथ 5 मेगापिक्सल का फ्रंट कैमरा दिया गया है। फोन फिंगरप्रिंट सेंसर व इन्फ्रारेड सेंसर के साथ आता है। फोन का डाइमेंशन 151x76x8.35 मिलीमीटर और वज़न 175 ग्राम है। फोन में 4100 एमएएच की बैटरी है। यह फोन एंड्रॉयड मार्शमैलो आधारित मीयूआई 8 पर चलता है।
style="background-color: white; box-sizing: border-box; color: #5e5e5e; font-family: tahoma, verdana, sans-serif;" />
हमारे मुताबिक, Xiaomi Redmi Note 4 एक बेहतरीन पैकेज है। बता दें कि हमने इस फोन का रिव्यू किया है। ल…