Skip to content

Instantly share code, notes, and snippets.

@metinsaylan

metinsaylan/lazy-tube.css

Created September 16, 2021 22:06
Show Gist options
  • Save metinsaylan/487f81cb7db44136c280a22b11408348 to your computer and use it in GitHub Desktop.
Save metinsaylan/487f81cb7db44136c280a22b11408348 to your computer and use it in GitHub Desktop.
Download ZIP
Lazy-load Youtube Videos
Raw
lazy-tube.css
.llv{min-height:350px;position:relative}.llv:after{content:"Click/Tap to Load Video";background-position:center;background-repeat:no-repeat;text-align:center;width:100%;height:100%;background-color:rgba(0,0,0,.3);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAtCAYAAAAeA21aAAACXUlEQVR4Ae3aA4xcURSA4VfbVsy6caMyqG3btuPUtm27DWpzbds2Tv9b2zPzdt89ybfeuXn/eOYaUqfOzxlGMdREE7RDf0zGUqzFHpzCVdzGYzjBE34IQSRikYDk99KR+V76Zz9PQCwiEQI/eMEJT3AHV3EKe7EOyzAFA9AeTVELxX91fD866IoYimN4jUhkQAqITETBGScxClV+L4BhdEcQpJCJwMCfBzCM6ZBCbsn3AxhGF4hFDPwygGGUhgvEIvxR+fMA3SEWM/TzAFsgFnPk8wAPIBbjLDVqFFcBqvFNKMRiEgjQQAVo+uFBjsXkE6ClCtBJ/cCKCNBPBRhr84WKFjVrgJkqwDKbLzR+vMjChSIlS5otwCoVYLPNF1qyRNSIk5NIx45mCrBPBThm84UWL5Yv5soVkSZNzBDgvApwze4B1GRliWzaJFKrliMD3FYB7jkkwIeJiRGZPl2kVClHBHimArx0aIAP4+4u0q2bvQO4qQDupgjwYW7eFGnRwl4BfFUAX1MFUJOTI7Jjh0jdurYOEKQCBJkuwIeJjxeZN0+kYkVbBQhTAYJNG+DDnDwpUqyYLQKE60uAvg3Q9wL6cYDjHwnOmCFSurRDHgnq5wL62aB+PUC/ImTp1wT1q8L6fQH9zpB+b9Cy7w7r/QF6h4jeI6R3iel9gr/YKXocTohCFqSAyEIMXHAKo3+2U/TnypYthhpohNbojfFYgBXYhsM4hxu4jSd4DTd4IwAhCEfUe7GIfy/2s5+HIwQB8IYbXuMJ7uAGzuEItmMlFmIC+qINGqMmiv3q+N4ASk8PomBg8rgAAAAASUVORK5CYII=);position:absolute;color:#eee}
Raw
lazy-tube.html
<div data-src-background="" data-video-src="https://youtu.be/GBitUateF44"></div>
Raw
lazy-tube.js
function lf(e){var t=document.createElement("iframe");t.setAttribute("src","https://youtube.com/embed/" + e.dataset.videoId + "?&rel=0"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","1"),t.setAttribute("allow","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),e.parentNode.replaceChild(t,e)};document.querySelectorAll("div[data-video-src]").forEach(function(e,t){e.classList.add("llv","bg-c"),vs=e.dataset.videoSrc.split("/"),id=vs[vs.length-1].replace("watch?v=",''),e.dataset.videoId=id,e.dataset.srcBackground="https://i.ytimg.com/vi_webp/"+id+"/hqdefault.webp",e.onmouseover=e.onclick=function(){lf(this)}});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment