- Tham gia
- 28/02/2015
- Bài viết
- 16,829
- Được Like
- 12,720
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.
- Đi đến Admin CP của bạn > BB Code Media Sites > YouTube
- 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à:
Mã:<div class="responsiveVideoContainer"> <iframe width="500" height="300" src="https://www.youtube.com/embed/{$id}?wmode=opaque" frameborder="0" allowfullscreen></iframe> </div>
- Lưu lại BB Code Media Site
- Đi đến file EXTRA.css trong Admin CP của bạn > Appearance > Templates
- Thêm dòng sau vào CSS:
Mã:.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%; }
- Lưu EXTRA.css
Nguồn: xenforo.com
Bài viết liên quan
Được quan tâm
Bài viết mới