Phương pháp tốt hơn để nhúng video YouTube trên trang web của bạn

Phương pháp tốt hơn để nhúng video YouTube trên trang web của bạn

Thật dễ dàng để nhúng video YouTube nhưng bạn sẽ ngạc nhiên khi biết lưu lượng mà video YouTube nhúng có thể thêm vào các trang web của bạn. Trình duyệt phải tải xuống khoảng một nửa Mb tệp JavaScript bổ sung (xem ảnh chụp màn hình) để chỉ hiển thị trình phát video YouTube. Và các tệp này được tải xuống ngay cả khi khách truy cập không bao giờ phát video được nhúng.


Video được nhúng không chỉ làm tăng kích thước byte của các trang web của bạn mà trình duyệt phải thực hiện nhiều yêu cầu HTTP để hiển thị trình phát video. Điều này làm tăng thời gian tải tổng thể của trang của bạn do đó ảnh hưởng đến điểm tốc độ trang. Hạn chế khác với mã nhúng YouTube mặc định là nó không phản hồi. Nếu mọi người xem trang web của bạn trên điện thoại di động, trình phát video có thể không thay đổi kích thước đúng cho màn hình nhỏ.


Nhúng video YouTube mà không tăng kích thước trang

Google+ sử dụng một kỹ thuật thông minh để nhúng video YouTube - nó chỉ nhúng hình ảnh thu nhỏ của video YouTube và trình phát video thực tế chỉ được tải khi người dùng nhấp vào hình thu nhỏ theo cách thủ công.

Hình ảnh thu nhỏ của YouTube có kích thước khoảng 15 kB để chúng tôi có thể giảm kích thước byte của các trang web xuống hơn 500 kb. Nó thật khổng lồ!

<style>
.youtube-player {
position: relative;
padding-bottom: 56.23%;
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}

.youtube-player iframe,
.youtube-player object,
.youtube-player embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}

.youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}

.youtube-player img:hover {
-webkit-filter: brightness(75%);
}

.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}

</style>


<div class="youtube-player" data-id="aSL-iIskEFU"></div>

<script>
/* Light YouTube Embeds by Wikianow */

/* Web: https://www.wikianow.com/2020/03/phuong-phap-tot-hon-de-nhung-video-youtube-len-trang-web.html */

document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});

function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}

function labnolIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}

</script>

Video ở trên được nhúng bằng cách sử dụng cùng một kỹ thuật theo yêu cầu.

Khi khách truy cập nhấp vào nút phát, hình ảnh thu nhỏ được thay thế bằng trình phát video YouTube tiêu chuẩn với chế độ tự động phát được đặt thành 1 để phát video ngay lập tức. Ưu điểm là JavaScript YouTube bổ sung chỉ được tải khi ai đó quyết định xem video được nhúng chứ không phải khác.


Các video nhúng nhẹ và đáp ứng trên YouTube

Mã nhúng tiêu chuẩn cho YouTube sử dụng thẻ IFRAME và chiều rộng và chiều cao của trình phát video được mã hóa cứng do đó làm cho trình phát không phản hồi.

Mã nhúng theo yêu cầu mới cho YouTube hơi khác một chút. Bạn không cần chỉ định kích thước trình phát vì chúng tôi hiện đang nhúng video một cách đáp ứng. Ngoài ra, IFRAME được thay thế bằng thẻ DIV và IFRAME chỉ được thêm vào trang khi khách truy cập nhấp vào nút phát.


Hướng dẫn Nhúng video YouTube

Sao chép-dán đoạn mã sau vào bất cứ nơi nào trong trang web của bạn nơi bạn muốn video YouTube xuất hiện. Hãy nhớ thay thế VIDEO_ID bằng ID thực tế của video YouTube.

<div class="youtube-player" data-id="VIDEO_ID"></div>

Chúng tôi sẽ không chỉ định chiều cao và chiều rộng vì trình phát video sẽ tự động chiếm chiều rộng của cha mẹ trong khi chiều cao được tự động tính toán. Bạn có thể dán nhiều khối DIV với ID video khác nhau nếu bạn cần nhúng nhiều video trên cùng một trang.

Tiếp theo, đặt JavaScript ở bất cứ đâu trong mẫu web của bạn. Nó tìm thấy tất cả các video được nhúng trên một trang web và sau đó thay thế các thành phần DIV bằng các hình thu nhỏ của video.

<script>

document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});

function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}

function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}

</script>

Cuối cùng, dán CSS trước thẻ đóng của mẫu web của bạn.

Phương pháp này sẽ giảm kích thước các trang web của bạn xuống 500 KB trong khi làm cho trang web của bạn thân thiện với thiết bị di động. Bạn có thể tham khảo mã chú thích để hiểu cách nhúng theo yêu cầu hoạt động.

<style>
.youtube-player {
position: relative;
padding-bottom: 56.23%;
/* Use 75% for 4:3 videos */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}

.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}

.youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}

.youtube-player img:hover {
-webkit-filter: brightness(75%);
}

.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}

</style>

Xin lưu ý rằng trình duyệt Chrome và Safari trên iPhone và Android chỉ cho phép phát lại video HTML5 khi được bắt đầu bởi tương tác người dùng. Họ chặn phương tiện nhúng từ phát lại tự động để ngăn tải xuống không mong muốn trên các mạng di động.

Bạn có thể thích những bài đăng này