Code chèn video Youtube vào website blogspot Responsive

CÓ VIDEO HƯỚNG DẪN NHÚNG VIDEO YOUTUBE VÀO BLOG Ở CUỐI BÀI VIẾT NHÉ!

Đối với những bạn làm SEO thì chắc chắn đã hiểu tầm quan trọng vì sao khi nhúng video Youtube vào website lại cần phải tương thích với mobile, tự động co giãn (Responsive) với mọi kích thước trình duyệt web rồi đúng không ah.

- Bài viết này mình sẽ hướng dẫn các bạn cách nhúng video Youtube vào website blogspot tự động co giãn với mọi kích thước trình duyệt, chỉ với một vài dòng code đơn giản là các bạn đã có thể chèn video vào web tự co giãn theo kích thước trình duyệt.

Bước 1: Các bạn Copy đoạn code CSS dưới đây chèn vào blogspot hoặc chèn vào website của các bạn

/* Responsive video youtube----- */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Bước 2: Nhúng video Youtube vào bài viết trong website

Các bạn hãy copy đoạn code dưới chèn vào blog hoặc website nơi mà bạn muốn hiển thị video youtube của bạn

<div class="video-container">
<iframe allowfullscreen="" data-thumbnail-src="https://i.ytimg.com/vi/F8woxJrvMqI/0.jpg" frameborder="0" src="//www.youtube.com/embed/F8woxJrvMqI?autoplay=1"></iframe>
</div>

Chú ý: Các bạn thay ID video màu xanh (F8woxJrvMqI) thành ID video của các bạn.

Nếu các bạn không muốn video youtube tự phát thì các bạn xóa bỏ đoạn code dưới

?autoplay=1

Chỉ với 2 bước đơn giản như trên là các bạn đã có ngay video chèn vào blog tự động co giãn theo kích thước trình duyệt rồi.

Dưới đây là video hướng dẫn cách embed video youtube vào website blogspot mà mình đã thực hiện, các bạn cùng xem để được hiểu rõ hơn nhé.

Tags: