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

Thảo luận trong 'Lập trình web Asp.net' bắt đầu bởi admin, 16/11/20.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,371
    Đã được thích:
    1,058
    Điểm thành tích:
    113
    Giới tính:
    Nam
    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é.
     
    Cảm ơn đã xem bài:

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

    danh sách diễn đàn rao vặt gov chất lượng
  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,371
    Đã được thích:
    1,058
    Điểm thành tích:
    113
    Giới tính:
    Nam


Like và Share ủng hộ ITSEOVN