Bài viết này mình xin chia sẻ với các bạn một đoạn code ngắn mình thường dùng để tạo cho cái player của YouTube (iframe) khi mình nhúng vào web site nó có thể responsive, co dãn nhưng vẫn giữ tỉ lệ của player như mình mong muốn.
Thông thường thì mình responsive chỉ theo width: 100%; hay max-width: 100%; thì khi mình co trình duyệt lại nó chỉ co cái chiều ngang của player làm vỡ cái tỉ lệ 16:9 thông thường của YouTube.
Để dễ hình dung các bạn vào link demo bên dưới mình code sẵn các bạn co nhỏ trình duyệt lại để test
Demo: https://codepen.io/ch7hteam/pen/QWwBEyZ
Còn bên dưới đây là đoạn code mình sử dụng. Các bạn nhớ là css quan hệ giữa thành phần cha với con nó rất quan trọng nên nhất định phải là class .video-container
rồi sau đó tới iframe. Thêm các thẻ khác chen giữa cũng được nhưng tương ứng chúng ta phải thêm một vài đoạn css tương ứng cho tùy trường hợp.
Code HTML:
<div class="video-container">
<iframe src="https://www.youtube.com/embed/klZNNUz4wPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>Code CSS
.video-container {
overflow: hidden;
position: relative;
width:100%;
}
.video-container::after {
padding-top: 56.25%;
display: block;
content: '';
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Phía trên có con số: padding-top: 56.25%;
các bạn có thể viết nó thành padding-top: calc(9 / 16 * 100%); tương ứng với tỉ lệ 16:9 nếu các bạn muốn tỉ lệ khác thì cứ lấy chiều cao / chiều rộng * 100%
Bài chia sẻ này mình xin dừng ở đây. mọi thắc mắc các bạn cứ comment bên dưới mình sẽ giải đáp.