Để tạo video đáp ứng tất cả độ phân giải màn hình của các thiết bị. Cách làm như sau:
Ví dụ này sử dụng một giải pháp CSS, bạn cần phải thêm một vài thẻ CSS trong file CSS chính của bạn.
Quá trình:
Việc đầu tiên mà bạn cần là các mã nhúng iframe YouTube, lấy đó trong tùy chọn chia sẻ video của bạn từ trang web YouTube.
Đặt mã iframe trên trang của bạn, trong ví dụ này trên các div iframe container (div.youtubevideowrap) có 2 tờ khai CSS cho chiều rộng, nó có chiều rộng: 80% và max-width: 640px.
Điều này làm cho nội dung như một đơn vị phần trăm được sử dụng, nó cũng có một chiều rộng tối đa thiết lập như là tôi không muốn đoạn video hiển thị rộng hơn 640px
Từ đây chúng ta cần phải thêm vào một container HTML xung quanh video và khai báo CSS.
Thiết lập các HTML và CSS Styles:
Tạo một div container xung quanh mã iframe và cung cấp cho nó một lớp ví dụ như:
[<div class="video-container"> <iframe .......=""></iframe></div>]
Mã css như sau:
[.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%; }]
COMMENTS