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>

.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>

<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

<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

<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