How to embed YouTube videos in post without compromising load speed?


#1

does anyone know how to embed youtube video without compromising page speed???


How to Embed YouTube Videos Without Effecting Blog Load Time
#4

@sachinsaini I use this method and it works like a charm: https://www.labnol.org/internet/light-youtube-embeds/27941/


#5

one great person said this…

There is a hack. WP YouTube Lyte. It will load just Video Image. After click, full iframe. Or we can defer iframe. Once page completely load then full iframe will load.


#6

@sachinsaini If you use WP Rocket then there is an option to Replace YouTube iframe with the preview image. So you don’t have to get your hands dirty with the code.


#7

We can use WP YouTube Lyte for embedding YouTube Video without increasing load time.

While using this plugin for more than six months, my finding says -

Pro: Prevent slowing down the web page. It is responsive.

Cons: Setup may little tough due to required API. Video appearance may look bit different. May not be suitable for everywhere on the web page. I am afraid of Cache. While using this plugin, Once I had changed Video Title, but my changes didn’t appear.

Alternative option
Best if you want to load high-priority content, images first then video later. Below method will load video once page actually finishes loading.

Required

  • Addition of tiny script
  • Requires a bit of change in the iframe code

Step 1. Change src to data-src

Regular iframe
<iframe src="https://www.youtube.com/embed/MAhXxIPIyrU" width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

After modification

<iframe data-src="https://www.youtube.com/embed/MAhXxIPIyrU" width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Step 2. Add this tiny script in the footer.

<script>
function init(){for(var t=document.getElementsByTagName("iframe"),e=0;e<t.length;e++)t[e].getAttribute("data-src")&&t[e].setAttribute("src",t[e].getAttribute("data-src"))}window.onload=init;
</script>

You can place it directly if your theme provides any script field for adding custom code.

Or, using functions.php

function gk_lazy_iframe() {
    echo '<script>
    function init(){for(var t=document.getElementsByTagName("iframe"),e=0;e<t.length;e++)t[e].getAttribute("data-src")&&t[e].setAttribute("src",t[e].getAttribute("data-src"))}window.onload=init;
    </script>';
}
add_action('wp_footer', 'gk_lazy_iframe', 90);

After then, whenever you add YouTube iframe just make sure to change src to data-src.

I hope this helps.


#10

Actually no. But you can manually implement it as shown on this page: https://www.labnol.org/internet/light-youtube-embeds/27941/

P.S: WP Rocket uses the similar code. Check /inc/front/lazyload.php

<script>function lazyLoadThumb(e){var t='<img src="https://i.ytimg.com/vi/ID/$thumbnail_resolution.jpg">',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="https://www.youtube.com/embed/ID?autoplay=1";e.setAttribute("src",t.replace("ID",this.dataset.id)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script>

and the below styling

.rll-youtube-player{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;max-width:100%;background:#000;margin:5px}.rll-youtube-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0}.rll-youtube-player img{bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;position:absolute;right:0;top:0;border:none;height:auto;cursor:pointer;-webkit-transition:.4s all;-moz-transition:.4s all;transition:.4s all}.rll-youtube-player img:hover{-webkit-filter:brightness(75%)}.rll-youtube-player .play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;position:absolute;background:url(' . WP_ROCKET_FRONT_URL . 'img/play.png) no-repeat;cursor:pointer}


#11

@techrax_2017 @GulshanKumar

In the above method, which method will require 2 clicks to play the video? I think labnol method needs 2 clicks to play the video right?

@GulshanKumar

Does this method load the video or the thumbnail? Because loading the thumbnail is anytime better. Please guide.


#12

The last “Alternative” method which is based on lazy load iframe doesn’t prevent increasing web page size but ensures that video iframe will start loading once pages completely load. So, this way it doesn’t affect other stuff.


#13

You forgot to mention the main thing :slight_smile: . I just saw it. This plugin is by the plugin author of Autoptimize. Thats a checkmate there because that guy is awesome.

I abhor use of plugins but in this case the code mentioned on labnol is 2 years old whereas the plugin itself was updated 4 weeks ago. It is clear from @techrax_2017 post that the code is still working fine. But for me, that would be difficult considering the many links that will have to be generated. End result is the use of a plugin. Lets hope it works well.


#14

i used the the labnol script and it is loading fine now.

And
it doesn’t need double click to play a video.


#15

Yes. I completely trust that script. My probem is, i have seen over the years that many codes get deprecated.

So 1 year down the line, if i have 300 videos on my site. And if the labnol script breaks, i wont find out till broken urls are shown in search console. And i will have to manually change all videos and their urls.

Neither will the script adjust itself if there is any change in the way youtube outputs thumbnails or stuff.

But the plugin will automatically adjust to such things. and if the plugin doesnt, there would be other plugins in the market. It is just a matter of changing the plugin. Not necessary labnol owner will change the script


#16

Yes, it’s plugin by AO author. So, no worries about quality + support.


#17

i think you are right sir and i am switching to the plugin now. i have a doubt does installing wp youtube lyte will effect in increasing the load time of overall website ?


#19

Thank you for this Gulshan… I’ll try this.


#20

Sam, You’re welcome!

Alternatively, you may also like to try “Velocity” plugin which is for similar purpose.


#21

Thank you very much for the tips here. I did not know that and I will use it for my blog.


#22

You’re welcome!


#23

Does it still work well for u @techrax_2017


#24

Yes, it still works for me and I’m using it on my site.


#25

Hello,
If I insert youtube video in my article, is it decrease the site speed?