Nhúng responsive Youtube video vào forum Xenforo

Thảo luận trong 'Thủ thuật Xenforo' bắt đầu bởi Admin, 14/6/14.

Đọc: 2,262

  1. Admin Administrator

    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...

    [​IMG]

    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!
    thành lê thích bài này.
  2. xgr3d

    xgr3d New Member

    trang web cua ban hon ca tuyet voi. cam on nhieu.
    Admin thích bài này.

Chia sẻ trang này