Trước đây mỗi khi mình nhúng video YouTube vào trang web, mình hay gặp vấn đề video sẽ bị mất một phần bên phải giống như ảnh dưới đây khi xem trên di động.
Trong khi đó xem trên máy tính thì vẫn bình thường.
Nguyên nhân là khi bạn lấy mã nhúng trên YouTube, mặc định YouTube sẽ đưa bạn kích thước chuẩn là 560×315 (bạn hãy xem trong đoạn code dưới có dòng width=”560″ và height=”315″.
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/cGTjx0JV_0Y" width="560"></iframe>
Khi xem trên máy tính, kích thước này không vấn đề nhưng khi xem trên điện thoại, tỉ lệ có khác biệt nên kích thước cố định nào sẽ có thể làm một số giao diện bị lỗi và video mất phần bên phải.
Một giải phải khác là cho width=”100%”, cách này sẽ giúp bề ngang tự thay đổi theo kích thước, tuy nhiên nó có một vấn đề là nếu bạn để height=”100%” luôn thì trên smartphone nó hiện một cái khung embed hình vuông khá xấu, còn nếu bạn để height là một kích thước cố định ví dụ height=”315″ thì tỉ lệ cũng sẽ rất thất thường khi xem. Mình cũng đã thử sử dụng các đơn vị ‘VW’ và ‘VH’ nhưng chúng dường như không hoạt động với iframe. Chiều rộng của tôi đã được đặt tương ứng.
Mình đã tìm trên mạng và test nhiều trường hợp cuối cùng đã tìm được một đoạn code rất hay giúp giải quyết vấn đề này. Mình gửi các bạn đoạn code.
<style>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/cGTjx0JV_0Y" width="560"></iframe>
</div>
Ở trên, mình đã chèn đoạn iframe vào một div có tên là video-container, div này có style tương ứng với đoạn code <style> ở trên và nó tỏ ra hoạt động hiệu quả với cả trên desktop và mobile. Bạn có thể thử để trải nghiệm.
Nguyên tắc hoạt động: Phần tử vùng chứa có chiều cao bằng 0 và phần đệm dưới cùng là phần trăm. Phần trăm đệm dưới cùng là phần trăm của chiều rộng vùng chứa, do đó, nó mang lại cho nó một tỷ lệ co cố định. Nhưng để iframe hiển thị bên trong vùng chứa chiều cao bằng không, bạn cần đặt vùng chứa tương đối và iframe tuyệt đối, được đặt bên trong div.
Dĩ nhiên khi ứng dụng, không phải video nào bạn cũng chèn mã code này, nếu dùng WordPress, bạn hãy thêm đoạn style bên dưới vào Addition CSS hay vào file style.css để nó hoạt động ở mọi nơi:
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Sau đó với video embed YouTube, bạn chỉ cần thêm nó vào div có tên video-container là xong. Dĩ nhiên bạn có thể đổi tên video-container thì một tên khác tuỳ thích.