Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 81
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Cách nhúng video YouTube reponsive, auto play và thêm nút tắt đèn

                    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>

                    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
                      Bài đăng mới hơn Bài đăng cũ hơn