유튜브 layzy load 시키기 동영상 lazyload

영상을 바로 페이지에 불러오게 되면 시간이 오래걸린다.

 

따라서 웹페이지 속도를 향상시키기위하여 레이지로드를 사용하는것이 더 유리하다.

 

유튜브에서 따로 지원해주지 않기 때문에 이는 따로 구현하여 실행해야 한다.

 

 

HTML

<div class="youtube" data-embed="유튜브아이디"> <div class="play-button"></div> </div>

유튜브를 클래스를 두고 data-embeded안에 유튜브 영상 아이디를 저장시킨다.

이때 data- 를 사용하는 이유는 이렇게 될 시 youtube[0].dataset 이라는 저장공간에 바로 저장되어 html에서 지정해서 불러오는 것 보다 더 빠른 속도로 불러올 수 있다. 따라서 이렇게 data- 로 클래스를 두는 것은 여러 모듈에서 자주 쓰인다. 여기서도 data-embeded에 유튜브 영상아이디를 두어서 빠르게 접근하도록 한다.

 

또한 맨처음 사진이 멈춰있을 때 플레이 버튼을 만들어주기 위해 다음과 같이 play-button 클래스를 넣어준다.

 

 JS

( function() {     let youtube = document.querySelectorAll( ".youtube" );          for (let i = 0; i < youtube.length; i++) {         let source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";                  let image = new Image();         image.src = source;         image.alt = 'youtube thumbnail'         image.addEventListener( "load", function() {             youtube[i].appendChild( image );         }( i ) );           youtube[i].addEventListener( "click", function() {             let iframe = document.createElement( "iframe" );             iframe.setAttribute( "frameborder", "0" );             iframe.setAttribute( "allowfullscreen", "" );             iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&autoplay=1" );               this.innerHTML = "";             this.appendChild( iframe );         } );         }; } )();

유튜브가 들어간 class에서 썸네일 이미지를 source에 넣은 후 넣는다.

이때 youtube[i].dataset을 하면 dataset 안에 있는 영상아이디를 불러올 수 있으므로, 이를 이용한다.

이후 상세 설정 값은 addEventListener에 클릭을 했을 경우 주게 된다. 이때 속성안에 iframe을 만드는 동작을 하고 기존의 html을 지운 후 appendChild를 한다.

 

한마디로 처음에는 썸네일 이미지를 불러와서 html파일로 넣어둔 후 이후 클릭이벤트가 일어났을때 iframe을 새로 만들어서 영상을 올리는 구조이다.

 

CSS

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