Nhúng responsive Youtube video vào forum Xenforo

[PVS]

Hướng dẫn này sẽ giúp bạn nhúng responsive Youtube video vào forum xenforo của mình, tức là video Youtube được nhúng vào websitecủa bạn sẽ tự động thay đổi chiều dài và chiều rộng để phù hợp với mọi kích cỡ màn hình, dù xem trên máy tính hay trên điện thoại thì video của bạn vẫn vừa khít với màn hình...

​

Tut này chỉ áp dụng với các video nhúng từ youtube, video từ các nguồn khác các bạn tự chỉnh sửa cho phù hợp.
Bắt đầu thôi, các bạn vào Admin CP > BB Code Media Sites > YouTube, thay phần Embed HTML bằng đoạn code sau:

<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, sau đó thêm vào template EXTRA.css đoạn code sau:

.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 lại và mọi thứ đã hoàn thành!

Nguồn: kyniem.org​

 

[Jindo_Katori]

Cái này màn hình nhỏ rất ok
Nhưng màn hình lớn không có hiệu quả với màn hình lớn bác ơi
Test màn hình 24 inch
Thật là vãi đạn

 

[PVS]

hình như phải chỉnh code lại nữa, chứ mặc định thì kích cỡ nói chung là vừa phải thôi

 

[Jindo_Katori]

padding-bottom: 56.25%; => về 27% thì ok với 24 inch nhưng bị bóp video với các màn hình khác
bác @PVS bán hành cũng ác

 

[PVS]

^_^