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.
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 {Nếu bạn muốn video có tỉ lệ 4:3
position: relative;
padding-bottom: 56.25%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.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/" frameallowfullscreen></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.
Theo dõi kênh Youtube của Vietnam Smile tại: https://www.youtube.com/user/anhlolemvui