Hướng dẫn cách tạo Responsive Youtube Video Cho Blogger

LongAnIT 5/04/2019
Hello chào các bạn hôm nay chúng ta lại băt đầu với bài viết nhúng video youtube vào blogger. Nghe có vẻ chẳng có gì mới cả đúng không nào?

Responsive video youtube cho Blogspot
Responsive video youtube cho Blogspot

Tuy nhiên trong bài viết ngày hôm nay longanit.com sẽ hướng dẫn cho các bạn cách nhúng video youtube vào blogspot với tính năng Reponsive trên tất cả các thiết bị smartphone. Vậy cách làm như thế nào chúng ta cùng điểm qua một số cách dưới đây

Cách 1: Viết một đoạn CSS sau đó gọi class HTML vào


Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy đoạn code bên dưới dán vào trước thẻ đóng ]]></b:skin>

.youtube-video-longanit {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 3: Gọi class thôi rất đơn giản bạn chỉ cần chèn mã nhúng video youtube vào giữa 2 thẻ <div> này thế là xong

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

Chú ý: dòng màu đỏ là mã nhúng video youtube. Để lấy được mã nhúng này rất dễ bên dưới mỗi video youtube bạn click vào dòng "chia sẻ" sau đó click vào mã nhúng và copy toàn bộ đoạn code bên trong dán vào là xong?

Cách 2: Sử dụng code Javascript

Cách này dĩ nhiên sẽ làm chậm tốc độ tải trang blog bạn một xíu nếu bạn nào lười có thể dùng code mình chia sẻ bên dưới.

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

Kết luận:
Như vậy qua bài viết trên tơi đã hướng dẫn các bạn cách cơ bản để nhúng video youtube vào trong blogspot Reponsive trên tất cả các thiết bị. Chúc các bạn thành công nhé.

Không có nhận xét nào:

Đăng nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây