Bài đăng nổi bật

Ford Biên Hòa Đồng Nai - Đại lý mua bán xe giá tốt nhất

Xuất hiện tại Biên Hòa Đồng Nai từ năm 2007 tới nay, hãng xe Ôtô nổi tiếng tới từ Mỹ –  Ford Motor  đã khẳng định được một chỗ đứng trong l...

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