Skip to content Skip to sidebar Skip to footer
Home / Blogger / Lazy Load / Tricks / Youtube

How To Make Responsive Lazy Load Youtube Embed Video In 2023 Onwards In Blogger

By Queiry Post a Comment

Welcome To The Queiry.com Users.

In This Article Post We Are Now Going To Discuss About Making A Youtube Video Lazy Load With Responsive Hight And Width According To Users Interface ie. Mobile Phone , Tablet And Computer PC For Blogger Are working On Blogspot.com Or Added Custom Domain In Blogspot.com.This Trick Formula Will Be Work For Both If Any one Does Not Find Any Plugin For Wordpress They User/you Can Also Use In Wordpress.

Lazy Load Resposive Video Embeding
Lazy Load Resposive Video Embeding


If Users/You  Use The Simple Youtube Embed  HTML Code In There Blog Post Then The Video May Loads As "Preload =Meta" Means It Affect On Your Blog Performance.It Takes Lots Of Time To Load Blog Page.If Your Blog|Blogpost Taking A Lot Of Time To Load Then It May Be Decrease The Performance Of Your Blogger Blog And It Also Effect Of Blogs Ranking In Google.

Because Google Want To Give High Quality And Fast Results There Users. So It Is More Important For Make Blog Page|Post Fast To Load. So Users/You Can Use This Lazy Load Youtube Embed Code.

Here Is Simple Youtube Video Embed Example Without Lazy Load



And This Is An Example Of Youtube Video Embed In Lazy load With Responsive Frames


But On Most Of Website I Have Visited They Are Providing The Information For How To Make Youtube Video Embed Lazy Load Moreover They Are Not Giving Details For How To Make Youtube Video Lazy Load With Responsive.

Now On Queiry.com User/You Can get Complete Information About Embeding Youtube Video Lazy Load With Responive Frames In Blogger And Wordpress.

Here Is Complete Code With CSS HTML And Java Script Integrated For Every Page Post By Adding Manunally No Need To Add It in HTML Theme Of Blogger Or Wordpress

<style>
body {
  margin: 10px auto;
  max-width: 640px;
  width: 100%;
}

.queiry {
  margin: 10px;
  background: #000;
  position: relative;
  padding-bottom: calc(9/16*100%);
}
.queiry .youtube {
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.queiry .youtube svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  margin-left: -34px;
  margin-top: -24px;
}
.queiry .youtube svg path {
  fill: #212121;
  fill-opacity: 0.8;
  transition: all 0.1s ease-out;
}
.queiry .youtube svg polygon {
  fill: #fff;
}
.queiry .youtube img,
.queiry .youtube iframe {
  width: 100%;
  height: 100%;
}
.queiry .youtube:hover {
  cursor: pointer;
}
.queiry .youtube:hover path {
  fill-opacity: 1;
  fill: #04aef4;
  fill: red;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


<body translate="no" >
  <div class="queiry">
  <div class="youtube"><img src="https://i.ytimg.com/vi/J5bEO-wwu78/maxresdefault.jpg"/>
    <svg>
      
      <polygon points="60,24 27,49 26,1></polygon>
    </svg>
  </div>
</div>//Youtube Responsive Lazy Load Embed Code By Queiry.com
  
      <script id="rendered-js" >
console.clear();
var queiry = document.querySelector(".queiry");
queiry.onclick = function () {
  playIt(this);
};
var $player, vid, vimg;
function playIt(that) {
  vimg = that.getElementsByTagName("img")[0];
  vid = vimg.src.match(/\/vi\/(.*)\//)[1];
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  that.querySelector("svg").style.display = "none";
}
function onYouTubeIframeAPIReady() {
  $player = new YT.Player(vimg, {
    videoId: vid,
    events: {
      'onReady': onPlayerReady } });


}
function onPlayerReady(event) {
  event.target.playVideo();
}
//Youtube Responsive Lazy Load Embed Code By Queiry.com
    </script>
In This Code A Video Id "J5bEO-wwu78" Which Can Be Change By User/Your Requirement Acccording Your Youtube Embed Video Id .

If In Any Case The Code Above Mentioned Does Not Work Please Use This Code Give Bellow May Work For You


<style>
html {
	background-color: #fff;
}
.queirylazy-youtube {
	max-width: 680px;
	margin: 60px auto;
	padding: 0 2px;

}

.queirylazy-youtube-video {
	background-color: #000;
	margin-bottom: 30px;
	position: relative;
	padding-top: 56.25%;
	overflow: hidden;
	cursor: pointer;
}
.queirylazy-youtube-video img {
	width: 100%;
	top: -16.82%;
	left: 0;
	opacity: 100;
}
.queirylazy-youtube-video .play-button {
	width: 0px;
	height: 60px;
	background-color: #000;
	box-shadow: 0 0 3px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 100;
	border-radius: 0px;
}
.queirylazy-youtube-video .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}
.queirylazy-youtube-video img,
.queirylazy-youtube-video .play-button {
	cursor: pointer;
}
.queirylazy-youtube-video img,
.queirylazy-youtube-video iframe,
.queirylazy-youtube-video .play-button,
.queirylazy-youtube-video .play-button:before {
	position: absolute;
}
.queirylazy-youtube-video .play-button,
.queirylazy-youtube-video .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}
.queirylazy-youtube-video iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>



<body translate="no">
  <div class="queirylazy-youtube">
	<div class="queirylazy-youtube-video" data-embed="J5bEO-wwu78">
		<div class="play-button"></div>
	</div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>

  
      <script id="rendered-js">
(function () {

  var youtube = document.querySelectorAll(".queirylazy-youtube-video");

  for (var i = 0; i < youtube.length; i++) {if (window.CP.shouldStopExecution(0)) break;

    var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/hqdefault.jpg";

    var image = new Image();
    image.src = source;
    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);
    });
  }window.CP.exitedLoop(0);;

})();
//Youtube Responsive Lazy Load Embed Code By Queiry.com
    </script>
In This Code Also There A Yotube Video Id Which Can Change According Your requirements.



If User/You Want To The Test The Code Given Above You Can Visit Our HTML Tester Tool For Making Any Kind Of Changes Like Youtube Video Id Etc

Thanks For Visiting Keep Smiling  :)
Keep Sharing.
Regards Queiry.com

Post a Comment for "How To Make Responsive Lazy Load Youtube Embed Video In 2023 Onwards In Blogger"

Post a Comment