Khi nhúng video YouTube vào website, trình phát YouTube thường hiển thị một số video có liên quan (còn được gọi là video được đề xuất) ở cuối video. Tuy nhiên, bạn muốn trải nghiệm người dùng được tốt hơn nên không muốn các video liên quan xuất hiện thì làm như thế nào?
Bài viết dưới đây sẽ hướng dẫn đến bạn đọc cách ẩn video liên quan từ YouTube nhé!
Trước tháng 09 năm 2018, quản trị viên website có thể vô hiệu hóa các video liên quan khi nhúng video YouTube vào website bằng cách thêm ?rel=0 vào iframe như thế này:
<iframe width = “640” height = “360” src = “https://www.youtube.com/embed/VIDEO_ID?rel=0” frameborder = “0”></iframe>
Tuy nhiên, vào tháng 9 năm 2018, YouTube đã thay đổi mã nhúng của họ nên cách thêm rel=0 vào iframe nhằm vô hiệu hóa hoàn toàn các video liên quan không còn tác dụng.
Xem thông báo từ Google:
The behavior for the rel parameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.
YouTube Player API Release Notes – August 23, 2018
Để nhúng video YouTube vào website mà không có video liên quan xuất hiện ở cuối, bạn hãy thêm đoạn mã dưới đây! và chỗ “VIDEO_ID” được bôi đổ bên dưới các bạn thay bằng ID Video bạn cần nhúng vào website
<!– https://maxl.us/hideyt –><style>.hytPlayerWrap{display: block; position: relative;}.hytPlayerWrap.ended::after{content:””; position: absolute; top: 0; left: 0; bottom: 0; right: 0; cursor: pointer; background-color: black; background-repeat: no-repeat; background-position: center; background-size: 64px 64px; background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);}.hytPlayerWrap.paused::after{content:””; position: absolute; top: 70px; left: 0; bottom: 50px; right: 0; cursor: pointer; background-color: black; background-repeat: no-repeat; background-position: center; background-size: 40px 40px; background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);}</style><div class=”hytPlayerWrapOuter”> <div class=”hytPlayerWrap”> <iframe width=”640″ height=”360″ src=”https://www.youtube.com/embed/VIDEO_ID?rel=0&enablejsapi=1″ frameborder=”0″ ></iframe> </div></div><script>”use strict”; document.addEventListener(‘DOMContentLoaded’, function(){if (window.hideYTActivated) return; let onYouTubeIframeAPIReadyCallbacks=[]; for (let playerWrap of document.querySelectorAll(“.hytPlayerWrap”)){let playerFrame=playerWrap.querySelector(“iframe”); let tag=document.createElement(‘script’); tag.src=”https://www.youtube.com/iframe_api”; let firstScriptTag=document.getElementsByTagName(‘script’)[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); let onPlayerStateChange=function(event){if (event.data==YT.PlayerState.ENDED){playerWrap.classList.add(“ended”);}else if (event.data==YT.PlayerState.PAUSED){playerWrap.classList.add(“paused”);}else if (event.data==YT.PlayerState.PLAYING){playerWrap.classList.remove(“ended”); playerWrap.classList.remove(“paused”);}}; let player; onYouTubeIframeAPIReadyCallbacks.push(function(){player=new YT.Player(playerFrame,{events:{‘onStateChange’: onPlayerStateChange}});}); playerWrap.addEventListener(“click”, function(){let playerState=player.getPlayerState(); if (playerState==YT.PlayerState.ENDED){player.seekTo(0);}else if (playerState==YT.PlayerState.PAUSED){player.playVideo();}});}window.onYouTubeIframeAPIReady=function(){for (let callback of onYouTubeIframeAPIReadyCallbacks){callback();}}; window.hideYTActivated=true;});</script>
Video tham khảo
Chúc các bạn thành công!