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.
Nội dung
- Cách thức thực hiện:
- CSS
- HTML
- Kiểm tra kết quả
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ẻ 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ẻ
như bên dưới:HTML
Chủ Đề