Cách tạo Responsive Youtube Video Cho Blogger
admin 5 năm trước

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.

34 lượt xem | 1 Bình luận
Hiện tại tác giả vẫn chưa cập nhật chia sẻ của mình
  1. Lê Hiền

    Một cách khá hay. Cho phép mình chia sẻ vào blog mình nhé.

    Đặt liên kết không bạn



Bình luận gần đây

https://allfreevn.com
adhella 17 phút trước
Immunohistochemistry shows lesser labeling of ОІENaC in the lithium treated rats compared to that in the controls what are kamagra tablets...
https://allfreevn.com
KtatsReidsen 2 giờ trước
get lyrica for sale buying cheap lyrica price where to get cheap lyrica pill...
https://allfreevn.com
TeoCeada 13 giờ trước
[url=http://tetracyclinetabs.com/]tetracycline 500mg cost[/url]...
https://allfreevn.com
TedCeada 17 giờ trước
[url=https://prednisonetb.com/]generic prednisone cost[/url]...
https://allfreevn.com
JoeCeada 1 ngày trước
[url=https://bupropion.directory/]2018 wellbutrin[/url] [url=https://zoloft2023.com/]zoloft generic brand[/url] [url=https://pleasantspharmacy.com/]online pharmacy non prescription drugs[/url] [url=https://dapoxetine.cyou/]buy priligy uk[/url] [url=https://cialisip.com/]otc generic cialis[/url]...
https://allfreevn.com
JoeCeada 1 ngày trước
[url=https://erythromycintabs.online/]erythromycin 250mg tab[/url] [url=https://zoloft.wiki/]cheap zoloft online[/url] [url=https://cialisip.com/]cialis 10 mg tablet cost[/url]...
https://allfreevn.com
JosephEroLf 1 ngày trước
[url=https://anafranil.cyou/]anafranil 10mg tablets[/url] [url=https://antabuse.ink/]buy generic antabuse[/url] [url=https://anafraniltab.shop/]anafranil ocd[/url] [url=https://abilifytab.shop/]10 mg abilify price[/url] [url=https://ventolin.quest/]ventolin inhalers[/url] [url=https://lasix.charity/]furosemide 20 mg tablets[/url] [url=https://cephalexintabs.monster/]buy cephalexin 250 mg[/url] [url=https://buypropranolol.life/]cheap inderal[/url]...
https://allfreevn.com
exonse 1 ngày trước
ivermectin dosage for rabbits ivermectin for scabies ivermectin causes seizures...