개발

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

체인의정석 2020. 6. 11. 19:12
728x90
반응형

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

 

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

 

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

 

 

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;

}
728x90
반응형