Home
any platform
blogger

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
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.

Post a Comment