Thứ Bảy, 10 tháng 12, 2016

Nhúng responsive Youtube video vào forum Xenforo

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 website củ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:



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

0 nhận xét

Đăng nhận xét