Cách tạo Responsive Youtube Video Cho Blogger

Khi bạn viết bài cho website, đôi khi bạn cũng cần chèn một video nào đó của Youtube về những bài hướng dẫn, thủ thuật, bài hát, hay một clip nào đó mà bạn cảm thấy hay để chia sẻ cho mọi người cùng xem. Tuy nhiên, khi hiển thị trên website thì nó lại không đáp ứng được kích cỡ màn hình trên mọi thiết bị như Máy tính, Điện thoại, Máy tính bảng.

Vậy làm cách nào để bạn có thể chèn video Youtube đáp ứng kích cỡ màn hình trên mọi thiết bị, hiển thị đẹp và như ý, không bị lệch khung hay chèn ra ngoài bài viết?

Mình đã tìm hiểu và biết được 2 cách để giải quyết vấn đề này, đó là sử dụng CSS hoặc Javascript, chỉ sử dụng 1 trong 2 cách. Bạn hãy đọc bài viết bên dưới để biết rõ hơn cách làm này nhé.

Sử dụng CSS để tạo Responsive Youtube Video Cho Blogger

Bước 1: Chèn đoạn CSS ngày vào trước thẻ ]]></b:skin>

.youtube-video {position:relative;padding-bottom:56.25%;padding-top:25px;height:0;overflow:hidden;}
.youtube-video iframe, .youtube-video object, .youtube-video embed {position:absolute;top:0;left:0;width:100%;height:100%;}

Bước 2: Chèn đoạn mã sau vào bài viết

<div class="youtube-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/j4HAWwnIbxM" frameborder="0" allowfullscreen></iframe>
</div>

– Bạn nhớ thay mã nhúng Youtube bôi đỏ bên trên thành mã nhúng Youtube của bạn muốn chia sẻ là được.

Bước 3: Hướng dẫn cách lấy mã nhúng của Youtube

– Đầu tiên, các bạn mở một video nào đó trên Youtube, xong bạn nhấn vào chữ Chia sẻ

– Xuất hiện hộp thoại bạn nhấn vào chữ Nhúng

– Một hộp thoại nữa tiếp tục mở ra, bạn nhấn vào chữ Sao chép

Vậy là bạn đã có mã nhúng của Youtube rồi, bạn chỉ cần dán nó vào dòng code bôi đỏ là xong.

Lưu ý: Bạn không cần thay đổi chiều cao và chiều rộng của nó, vì CSS đã giúp bạn co giãn đáp ứng với mọi kích cỡ màn hình rồi.

Sử dụng Javascript để tạo Responsive Youtube Video Cho Blogger

Bạn chỉ cần thêm đoạn Javascript dưới đây vào trước thẻ </body>, kế tiếp lấy mã nhúng của Youtube bỏ vào bài viết là xong.

<script type='text/javascript'>
//<![CDATA[
$(function() {
    
    var $allVideos = $("iframe[src*='//player.vimeo.com'], iframe[src*='//www.youtube.com'], object, embed"),
    $fluidEl = $("figure");
      
 $allVideos.each(function() {
 
   $(this)
     // jQuery .data does not work on object/embed elements
     .attr('data-aspectRatio', this.height / this.width)
     .removeAttr('height')
     .removeAttr('width');
 
 });
 
 $(window).resize(function() {
    
   $allVideos.each(function() {
   
     var $el = $(this);
        var newWidth = $el.parents('figure').width();
     $el
         .width(newWidth)
         .height(newWidth * $el.attr('data-aspectRatio'));
   
   });
 
 }).resize();
});
//]]>
</script>

Ở đây, mình có thêm sẵn đoạn code của Vimeo iframe[src*='//player.vimeo.com'], bởi vì nó cũng là một trang chia sẻ Video lớn gần giống Youtube, nếu bạn có nhu cầu thì sử dụng luôn, còn không cứ xóa nó đi nha.

Vậy là mình đã hướng dẫn xong cách để chèn Video của Youtube đáp ứng kích cỡ màn hình trên mọi thiết bị rồi đấy. Nếu bạn có gì thắc mắc hay cần giúp đỡ gì thì cứ để lại bình luận bên dưới, mình sẽ trả lời bạn trong thời gian sớm nhất.

Chúc bạn thành công.