Khi chèn video vào website, các theme có thể đã có css cài đặt cho video luôn giữ đúng tỉ lệ khi website hiển thị ở những màn hình khác nhau. Tuy nhiên, nếu bạn dùng mã nhúng <iframe ></iframe> thì bạn sẽ phải quy định chiều cao và chiều ngang cho khung video (<iframe src=”url” width=”chieu-ngang” height=”chieu-cao”></iframe>). Như vậy, khi áp dụng responsive cho thuộc tính này (thu nhỏ màn hình thiết bị và chiều ngang của video bị thu nhỏ để không vỡ khung website), vô hình chung thay đổi tỉ lệ giữa chiều cao và chiều ngang của khung video (vì khi màn hình thu nhỏ, chiều cao khung video không thay đổi). Vậy giải quyết như thế nào?

Chèn (Nhúng) Video vào website giữ đúng tỉ lệ

Để video luôn giữ đúng tỉ lệ khi co kéo màn hình thiết bị, ta sử dụng đoạn css như sau

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
 
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
 
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
 
.embed-responsive-4by3 {
  padding-bottom: 75%;
}

Khi đó, ta sẽ khai báo phần html là:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..." width="300" height="150"></iframe>
</div>

hoặc:

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..." width="300" height="150"></iframe>
</div>

Như vậy kích thước khung video ban đầu là do bạn đặt, nhưng khi bạn co dãn màn hình thiết bị, video sẽ co kéo theo mà vẫn giữ đúng tỉ lệ

Đơn giản phải không? Chúc bạn thành công!

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 *