How To Make Responsive Lazy Load Youtube Embed Video In 2023 Onwards In Blogger
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 |
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>
<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.
Post a Comment for "How To Make Responsive Lazy Load Youtube Embed Video In 2023 Onwards In Blogger"