CHÈN VIDEO YOUTUBE, VIMEO RESPONSIVE VÀO BLOGGER / BLOGSPOT

Hiện nay thì như bạn biết thì chúng ta có hai dịch vụ lưu trữ và chia sẻ video khá phổ biến là Youtube và Video. Để chia sẻ video thì thông thường đối với hai dịch vụ lưu trữ này chúng ta thường tải video lên đó và dùng thẻ iframe để nhúng về blog của mình. Bình thường thì chuyện này khá là ok với những website có giao diện tĩnh, còn đối với những website có tính năng responsive (tự động co giãn theo màn hình) thì khi thu nhỏ màn hình lại thì video đó vẫn giữ nguyên kích thước chúng ta quy định trong mã nhúng.

Điều này làm xấu không ít thì nhiều đối với những thiết bị có màn hình nhỏ, vì video sẽ tràn ra hoặc bị ẩn khi ở ngoài hoặc trong khung bài viết. Hôm nay qua bài viết này mình sẽ hướng dẫn các bạn một thủ thuật nhỏ giúp cho các bạn làm cho toàn bộ các mã nhúng video sử dụng thẻ iframe responsive chứ không chỉ riêng là Youtube và Video.

Chèn video Youtube, Video Responsive vào Blogger / Blogspot

Thủ thuật dưới đây mình sẽ sử dụng CSS, do đó các bạn có thể hoàn toàn yên tâm về tốc độ cũng như độ ổn định của nó.

Chèn CSS

Đầu tiên bạn tìm và chèn vào blog của bạn đoạn css này (chèn lên thẻ ]]></b:skin> ấy)

Nếu bạn muốn video có tỉ lệ 16:9

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

Nếu bạn muốn video có tỉ lệ 4:3

.video-container {
    position: relative;
    padding-bottom: 75%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Sử dụng

Để video của bạn trở nên responsive, hãy đặt thẻ iframe của nó vào trong thẻ sau

<div class="video-container">
<iframe width="" height="" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
</div>

tùy thuộc vào thẻ iframe mà nó có thể khác thông số nên mình để chung chung thế này, lúc đăng bài bạn chỉ cần thay thẻ iframe bên trên bằng thẻ iframe nhúng video của bạn là ổn.

Lưu ý: trong trường hợp bạn không muốn video của mình nó nằm full chiều rộng của bài viết thì bạn có thể thêm thuộc tính max-width giới hạn cho .video-container ở trên phần CSS.

Lời kết

Chỉ đơn giản với một vài công đoạn nhỏ như vậy, bây giờ khi bạn chèn bất cứ video nào sử dụng thẻ iframe thì nó sẽ tự động co giãn theo màn hình đó.

Demo cho mấy bác khó tính: