블로그스팟에서 유튜브 지연로드(Lazy Load) 하는 방법

<style>   .youtube-player {     position: relative;     padding-bottom: 56.25%;     height: 0;     overflow: hidden;     max-width: 100%;     background: #000;     margin: 0px;   }   .youtube-player iframe {     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     z-index: 100;     background: transparent;   }   .youtube-player img {     object-fit: cover;     display: block;     left: 0;     bottom: 0;     margin: auto;     max-width: 100%;     width: 100%;     position: absolute;     right: 0;     top: 0;     border: none;     height: auto;     cursor: pointer;     -webkit-transition: 0.4s all;     -moz-transition: 0.4s all;     transition: 0.4s all;   }   .youtube-player img:hover {     -webkit-filter: brightness(75%);     -moz-filter: brightness(75%);     filter: brightness(75%);   }   .youtube-player .play {     height: 72px;     width: 72px;     left: 50%;     top: 50%;     margin-left: -36px;     margin-top: -36px;     position: absolute;      background: url(“https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg”) no-repeat;     cursor: pointer;   } </style>

<script type=”text/javascript”> //<![CDATA[ function labnolIframe(div) { var iframe = document.createElement(“iframe”); iframe.setAttribute( “src”, “https://www.youtube.com/embed/” + div.dataset.id + “?autoplay=1&rel=0” ); iframe.setAttribute(“frameborder”, “0”); iframe.setAttribute(“allowfullscreen”, “1”); iframe.setAttribute( “allow”, “accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” ); div.parentNode.replaceChild(iframe, div); } function initYouTubeVideos() { var playerElements = document.getElementsByClassName(“youtube-player”); for (var n = 0; n < playerElements.length; n++) { var videoId = playerElements[n].dataset.id; var div = document.createElement(“div”); div.setAttribute(“data-id”, videoId); var thumbNode = document.createElement(“img”); thumbNode.src = “https://i.ytimg.com/vi/ID/hqdefault.jpg”.replace( “ID”, videoId ); div.appendChild(thumbNode); var playButton = document.createElement(“div”); playButton.setAttribute(“class”, “play”); div.appendChild(playButton); div.onclick = function () { labnolIframe(this); }; playerElements[n].appendChild(div); } } document.addEventListener(“DOMContentLoaded”, initYouTubeVideos); //]]></script>

<div class=”youtube-player” data-id=”VIDEO_ID”></div>