Tối ưu tải sau "Lazy Load" Embedded YouTube Videos

Cách tối ưu tải sau Lazy Load Embedded Video Youtube rất quan trọng khi website của bạn cần sử dụng nhúng video và website. Vì nếu bạn không tối ưu tải sau Lazy load điểm tốc độ google speed sẽ rất chậm và có thể tụt thảm dù web bạn có tối ưu tốt cỡ nào.

Chúng ta có nhiều cách tối ưu load tải sau VD:

Cách 1: Lazy load bằng thuộc tính có sẵn

• HMTL cung cấp cho chúng ta 1 thuộc tính vô cùng hưu ích để tối ưu tải sau là: loading="lazy"

Cách chèn vô như sau:

Mã:

<iframe src="liên-kết-youtube-cua-ban"
        loading="lazy"
        width="700"
        height="450"></iframe>

• Với cách này video không load trước khi bạn chưa kéo tới vị trí index của video.

Cách 2: Dùng javascript để load tải sau thông qua sự kiện click.

• Với cách này video của bạn hầu như không load, video chỉ được load khi sự kiện người dùng click vào video để xem thì video mới được chạy.

Cách chèn như sau:

Chèn HTML sau vô:

HTML:

<div class="youtube" data-embed="HBMEVUo6omQ">
        <div class="play-button"></div>
</div>

Chèn css sau vào web.

HTML:

.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;
}

Tiếp theo chèn javascript sau vào web:

HTML:

( function() {

    var youtube = document.querySelectorAll( ".youtube" );
    
    for (var i = 0; i < youtube.length; i++) {
        
        var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.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 );
                } );   
    };
    
} )();

Vậy là xong, chạy web tận hưởng nhé.