Nhúng Video Youtube Reponsive với CSS

Nhúng các video vào các trang web sẽ làm nội dung thêm phong phú nhưng các bạn sẽ bị gặp vấn đề khi xem trang web này ở các màn hình có kích thước khác nhau như Destop, Tablet, SmartPhone, v.v. thì các Video này không tự thay đổi kích thước để phù hợp với kích thước màn hình.
Tuy nhiên khi bạn nhúng một video từ Youtube vào trang web, nó đã có định độ rộng và độ cao, nên có thể bạn chạy tốt trên Destop nhưng lại bị tràn màn hình khi ở thiết bị moblile.
Công nghệ Responsive-dịch ra tiếng việt là Web đáp ứng, mục đích để nội dung trên các trang web sẽ tương thích với các kích thước màn hình khác nhau.
Bài này tôi sẽ hướng dẫn cách sử dụng CSS để nhúng được các Video Youtube Responsive, điều mà Youtube không tự động thực hiện được khi chúng ta copy mã nhúng từ Youtube đặt vào trang web của chúng ta.

Cách thức thực hiện:

• Trước hết bạn cần đặt phần code nhúng video youtube trong thẻ  <div> và chỉ định thuộc tính padding-bottom trong khoảng từ 50% đến 60%.
• Rồi tạo các CSS cho các thẻ con như iframe, object, embed với các thuộc tính độ rộng: 100%, độ cao: 100% height và posion: absolute. Điều này sẽ giúp các phần tử nhúng của video sẽ tự động co giãn theo kích thước màn hình.

Xem code CSS bên dưới.

CSS

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

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

Kế tiếp, sửa code HTML và nhúng video vào giữa thẻ <div> như bên dưới:

HTML

<div class="video-container"><iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen</iframe</div>

Bây giờ chúng ta hãy kiểm tra thử kết quả xem Video của chúng ta đã hoạt động tốt trên cả Tablet, Desktop và Mobile hay chưa.

Kiểm tra kết quả