Bạn chèn video từ youtube vào chẳng hạn, nhưng chẳng may  web bạn không có sẵn code để co dãn khung video co vừa khung bài viết (Responsive). Hậu quả là khung video bị tràn ra ngoài khung  website rất xấu xí và khó chịu. Điều này cũng ảnh hưởng đến khả năng xem video của website khi truy cập bằng điện thoại hoặc các thiết bị màn hình kích thước nhỏ.

Css chỉnh video vừa với khung bài viết (Responsive Video)

Để khắc phục điều này chỉ  cần đơn giảm một đoạn css

.video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Tất nhiên khi chèn video bạn phải cho vào một thẻ class là “video” để hưởng đặc tính của đoạn css trên, ví dụ bạn có thể chèn html là:

<div class="video">Code nhúng video</div>

Vậy là xong, video trên website của bạn sẽ hiển thị rất vừa vặn và đẹp mắt.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *