How to Embed Responsive Lazy Loaded YouTube Videos

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to add responsive Youtube lazyload iframe

Benefits :-

1. Responsive Design Layout for youtube embedded
2. New Look for Embedded Youtube Videos

Let's Start

Demo

How to add responsive Youtube lazyload iframe :-

Step 1 :- Go to Blogger's dashboard and click theme.

Step 2 :- Click the arrow down icon next to the 'customize' button.

Step 3 :- Click Edit Html.

Step 4 :- Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.

Step 5 :- Copy the provided below code and paste it just before ]]></b:skin>.

/* Lazy Youtube By Wolv Themes */ .lazyYt{background:#f6f6f6;position:relative;overflow:hidden;padding-top:56.25%;border-radius:17.5px} .lazyYt img{width:100%;top:-16.84%;left:0;opacity:.95} .lazyYt img, .lazyYt iframe, .lazyYt .play{position:absolute} .lazyYt iframe{width:100%;height:100%;bottom:0;right:0} .lazyYt .play{top:50%;left:50%; transform:translate3d(-50%,-50%,0); transition:all .5s ease;display:block;width:70px;height:70px;z-index:1} .lazyYt .play svg{width:inherit;height:inherit; fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:8} .lazyYt .play .c{stroke:rgba(255,255,255,.85);stroke-dasharray:650;stroke-dashoffset:650; transition:all .4s ease-in-out; opacity:.3} .lazyYt .play .t{stroke:rgba(255,255,255,.75);stroke-dasharray:240;stroke-dashoffset:480; transition:all .6s ease-in-out; transform:translateY(0)} .lazyYt .play:hover .t{animation:nudge .6s ease-in-out;-webkit-animation:nudge .6s ease-in-out} .lazyYt .play:hover .t, .lazyYt .play:hover .c{stroke-dashoffset:0; opacity:.7;stroke:#FF0000} .nAmp .lazyYt{display:none}
svg.line, svg .line{fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round; stroke-width:1} svg.c-1{fill:#767676} svg.c-2{fill:#9c8321; opacity:.4} svg.line .c-1{stroke:#767676} svg.line .c-2{stroke:#9c8321; opacity:.8}

Step 6 :- Replace all the blue background marked parts according to your theme.

Step 7 :- Add this Html code wherever you want to use it

<!--[ Lazy youtube ]-->
<div class="lazyYt" data-embed="xxxxxxxxxxx">
  <div class="play">
    <svg viewbox="0 0 213.7 213.7">
      <polygon class="t" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon>
      <circle class="c" cx="106.8" cy="106.8" r="103.3"></circle>
    </svg>
  </div>
</div>

Step 8 :- Copy the provided below code and paste it just before </body>.

<script>/* lazy youtube */ ( function() {var youtube = document.querySelectorAll(".lazyYt"); for (var i = 0; i < youtube.length; i++) {var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg"; var image = new Image(); image.setAttribute("class", "lazy"); image.setAttribute("data-src",source); image.setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="); image.setAttribute("alt","Youtube video"); image.addEventListener( "load", function() {youtube[ i ].appendChild( image );}( i ) ); youtube[i].addEventListener( "click", function() {var iframe = document.createElement( "iframe" ); iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" ); this.innerHTML = ""; this.appendChild( iframe ); }); }; })();</script>

---

Conclusion

In this post, I have talked about How to add responsive Youtube lazyload iframe. Tell us What You Say About The Post by Making a Comment and if you have any questions Contact Us at the Contact Us page. Hope You Enjoy In Our Website.

Refrence:
https://www.wolvthemes.xyz/2022/05/how-to-add-responsive-youtube-lazyload.html

Our Posts Are Protected By DMCA.com. Don't Copy Our Post. Wolv Themes All Rights Reversed.

Rate this article