Tìm hiểu cách nhúng video YouTube vào trang web của bạn và làm cho nó hoàn toàn đáp ứng từ thiết bị di động đến máy tính để bàn bằng CSS.
Nếu bạn sao chép mã video nhúng từ YouTube và trong đó bạn nhận được một <iframe> trình bao bọc trông tương tự như sau:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/uga8GWzdv3c"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>Thật không may, iframe yêu cầu chiều cao và chiều rộng cố định để hiển thị với tỷ lệ khung hình chính xác trong trình duyệt. Điều này làm cho iframe không tương thích với thiết kế đáp ứng ngay lập tức.
May mắn thay, bạn có thể nhúng video của mình bằng cách gói iframe của bạn trong vùng chứa chính:
<div class="youtube-video-container">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/uga8GWzdv3c"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>Và sau đó tạo kiểu cho vùng chứa video của bạn bằng CSS:
.youtube-video-container {
position: relative;
overflow: hidden;
width: 100%;
}
.youtube-video-container::after {
display: block;
content: "";
padding-top: 56.25%;
}
.youtube-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Tính toán tỷ lệ khung hình
Bạn có thắc mắc 56.25% là gì không padding-top là về? Tỷ lệ này dựa trên tỷ lệ khung hình của video YouTube, là 16/9.
Để có được giá trị đệm chính xác nhằm làm cho vùng chứa video của bạn đáp ứng, bạn chỉ cần tìm hiểu giá trị chiều cao là bao nhiêu% so với giá trị chiều rộng:
9/16 * 100 =56,25%
9 là 56,25% trong tổng số 16.
Nếu tỷ lệ khung hình của video được nhúng của bạn là 4:3, bạn sẽ tính toán phần đệm trên cùng của vùng chứa video như sau:
3/4 * 100 =75%
Và như vậy.