Cách nhúng video YouTube reponsive, auto play và thêm nút tắt đèn
vào
19 thg 10, 2018
Nếu bạn thường xuyên nhúng các video từ kênh YouTube vào Blog, có thể tham khảo bài hướng dẫn của mình dưới đây. Cách chèn này có 2 ưu điểm chính: thẻ iframe sẽ reponsive với mọi kích thước màn hình, tự động chơi khi tải trang, hiển thị phụ đề mặc định, chặn hiển thị chú thích (quảng cáo). Ngoài ra bạn có thể chọn thêm nút tắt đèn sử dụng chỉ hiển thị video và làm tối vùng nội dung bài viết.
Cách thực hiện
Bước 1: Chèn css trong trong <b:skin>...</b:skin>
Bước 2: Chèn script trước thẻ đóng </body>
Bước 3: Chèn iframe trong bài viết hoặc widget
Bước 4: Đặt nút tắt đèn vào vị trí thích hợp
Lưu ý: Sửa lại css cho bút tắt đèn cho phù hợp với giao diện Blog của bạn
Cách thực hiện
Bước 1: Chèn css trong trong <b:skin>...</b:skin>
Copy
.video-container {
position: relative;
padding-bottom: 56.25%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.turn-off {
cursor: pointer;
outline: none;
border: none;
padding: 0;
background: transparent;
}
.dim-overlay {
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
background-color: rgb(19,19,19);
}
.dim-overlay .turn-on {
cursor: pointer;
outline: none;
border: none;
padding: 0;
background: url(https://www.blogger.com/img/lightbox/lightbox_sprite.gif) no-repeat;
width: 20px;
height: 20px;
top: 5px;
right: 5px;
position: absolute;
z-index: 100;
}
.dim-overlay.hidden {
display:none;
}
.centered {
position: fixed;
z-index: 101;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 80%;
width: 100%;
}
@media (max-width: 1366px) {
.centered {
max-width: 75%;
}
@media (max-width: 800px) {
.centered {
max-width: 100%;
}
Bước 2: Chèn script trước thẻ đóng </body>
Copy
<script>//<![CDATA[
$('.turn-off').on('click', function() {
$('body').css('overflow', 'hidden')
$('.dim-overlay').removeClass('hidden')
$('.video-player').addClass('centered')
$('.dim-overlay,.turn-on').click(function() {
$('body').css('overflow', '')
$('.dim-overlay').addClass('hidden')
$('.video-player').removeClass('centered')
})
})
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
//]]></script>
Bước 3: Chèn iframe trong bài viết hoặc widget
Copy
<div class='video-player'>
<div class="video-container">
<iframe id="player" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" src="https://www.youtube.com/embed/VIDEO_ID?rel=0&fs=1&cc_load_policy=1&iv_load_policy=3&modestbranding=1&enablejsapi=1"></iframe>
</div>
</div>
Bước 4: Đặt nút tắt đèn vào vị trí thích hợp
Copy
<button class='turn-off'></button>
<div class='dim-overlay hidden'>
<button class='turn-on'>
</div>
Lưu ý: Sửa lại css cho bút tắt đèn cho phù hợp với giao diện Blog của bạn
Nội dung chính
