Responsive Width / Height Media Embeds

[PVS]

Vnxf.vn - Nhúng phương tiện truyền thông thường có chiều rộng cố định khi nhúng vào bài viết:

​

Hướng dẫn này sẽ chỉ cho bạn cách để làm cho các video nhiều phản ứng nhanh hơn (theo chiều rộng và chiều cao) với kết quả cuối cùng như thế này ở chiều rộng đầy đủ:

​

Hoặc độ rộng nhỏ hơn:

​

Hoặc thậm chí nhỏ hơn!

​

Các bước để làm theo là đơn giản. Mặc dù trong ví dụ này sử dụng YouTube, nhưng bạn có thể áp dụng lý thuyết này cho bất kỳ trang web phương tiện truyền thông nơi Embed HTML là một iframe.

1. Đi đến Admin CP của bạn > BB Code Media Sites > YouTube
2. Chúng ta cần phải thay đổi Embed HTML để có một div xung quanh nó với một class của "responsiveVideoContainer". Kết quả cuối cùng sẽ là:
   

   <div class="responsiveVideoContainer">
       <iframe width="500" height="300" src="https://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe>
   </div>

3. Lưu lại BB Code Media Site
4. Đi đến file EXTRA.css trong Admin CP của bạn > Appearance > Templates
5. Thêm dòng sau vào CSS:
   

   .responsiveVideoContainer
   {
       position: relative;
       padding-bottom: 56.25%;
       padding-top: 30px; height: 0; overflow: hidden;
       margin-bottom: 10px;
   }
   
   .responsiveVideoContainer iframe
   {
       margin-bottom: 10px;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }

6. Lưu EXTRA.css

Đáng chú ý là không có chiều rộng tối đa ở đây. Bạn có thể tránh cách này hoặc điều chỉnh CSS nếu bạn có một style rộng vs chiều rộng cố định như với kỹ thuật này trên một màn hình lớn, các phương tiện truyền thông nhúng sẽ lấp đầy toàn bộ chiều rộng của màn hình hiển thị.

Nguồn: xenforo.com​

 

[Gia Khang]

Theo mình nghĩ thì nên thêm max-height là một con số cố định vì để 100% như thế đối với một số thết bị sẽ hiển thị không chính xác

 

[PVS]

Theo mình nghĩ thì nên thêm max-height là một con số cố định vì để 100% như thế đối với một số thết bị sẽ hiển thị không chính xác

thì đó là code mẫu thôi, có thể chỉnh lại tùy ý mình mà

 

[kimchihanquoc]

chỉnh sao mà trên di động và máy tính bảng xem đc?

 

[tuna]

ko đc