Tải nhanh video youtube khi load trang cho blog/web

Một trang blog có video của youtube khi load trang có độ trễ đầu vào là rất lớn, thời gian chặn luồng chính này làm giảm thứ hạng trang blog dưới con mắt của google về xếp hạng.

Để tải nhanh video youtube khi load trang cho blog/web, thay vì sử dụng nhúng video YouTube mặc định đồng nghĩa với việc bổ sung một khối tài nguyên vào trang cho dù không biết người dùng có xem video hay không.

Ta sử dụng phương pháp giữ chỗ cho video và nó chỉ là một hình ảnh bạn có thể nhấp vào, và được liên kết với code nhúng YouTube.

Bạn yên tâm rằng nó vẫn hoạt động cơ bản giống hệt như nhúng code video youtube vì người dùng vẫn có thể nhấp, phát video tại chỗ. Trang blog sẽ load nhanh hơn vì không có yêu cầu nào từ việc tải youtube.

DEMO



Tải nhanh video youtube khi load trang cho blog/web


1- Cách 1

Sử dụng code sau khi soạn thảo văn bản

<div style='text-align:center'>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID Video Youtube" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{background: url(https://2.bp.blogspot.com/--A7ynKVLMjE/XhShzynvzPI/AAAAAAAAHbc/qt0ExR-Xr8QYMosBMELoOUACplzBkbufACLcBGAsYHQ/s1600/youtube.png) no-repeat center}</style><a href=https://www.youtube.com/embed/ID Video Youtube?autoplay=1><img src=https://img.youtube.com/vi/ID Video Youtube/hqdefault.jpg alt='Tiêu đề video'><span></span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="Tiêu đề video"></iframe>
</div>

Thay ID và tiêu đề vào code, khi xuất bản báo lỗi iframe thì nhấn bỏ qua và xuất bản bình thường.

2- Cách 2

Sử dụng code sau cho phần soạn thảo HTML của bài viết.

<div class="youtube" data-embed="ID Video Youtube">
<div class="play-button">
</div>
</div>
<style>
.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;
}
</style>
<script>
//<![CDATA[
( 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 );
    } ); 
 }; 
} )();
 //]]>
</script>

Thay ID video ở phần bôi vàng chanh. Bạn có thể bỏ css và javascript vào trong mẫu cho gọn nếu blog hay post video của youtube và khi viết bài chỉ cần sử dụng đoạn html trên cùng.

Tổng hợp từ nhiều nguồn.
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji