Chèn video Youtube, Vimeo Responsive vào Blogger / Blogspot

Hiện nay thì như bạn biết thì chúng ta có hai dịch vụ lưu trữ và chia sẻ video khá phổ biến là Youtube và Video. Để chia sẻ video thì thông thường đối với hai dịch vụ lưu trữ này chúng ta thường tải video lên đó và dùng thẻ iframe để nhúng về blog của mình. Bình thường thì chuyện này khá là ok với những website có giao diện tĩnh, còn đối với những website có tính năng responsive (tự động co giãn theo màn hình) thì khi thu nhỏ màn hình lại thì video đó vẫn giữ nguyên kích thước chúng ta quy định trong mã nhúng.

Chèn video Youtube, Vimeo Responsize vào Blogger / Blogspot

Điều này làm xấu không ít thì nhiều đối với những thiết bị có màn hình nhỏ, vì video sẽ tràn ra hoặc bị ẩn khi ở ngoài hoặc trong khung bài viết. Hôm nay qua bài viết này mình sẽ hướng dẫn các bạn một thủ thuật nhỏ giúp cho các bạn làm cho toàn bộ các mã nhúng video sử dụng thẻ iframe responsive chứ không chỉ riêng là Youtube và Video.

Chèn video Youtube, Video Responsive vào Blogger / Blogspot

Thủ thuật dưới đây mình sẽ sử dụng CSS, do đó các bạn có thể hoàn toàn yên tâm về tốc độ cũng như độ ổn định của nó.

Chèn CSS

Đầu tiên bạn tìm và chèn vào blog của bạn đoạn css này (chèn lên thẻ ]]></b:skin> ấy)
Nếu bạn muốn video có tỉ lệ 16:9
.video-container {
    position: relative;
    padding-bottom: 56.25%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
Nếu bạn muốn video có tỉ lệ 4:3
.video-container {
    position: relative;
    padding-bottom: 75%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Sử dụng

Để video của bạn trở nên responsive, hãy đặt thẻ iframe của nó vào trong thẻ sau
<div class="video-container">
<iframe width="" height="" src="//www.youtube.com/embed/" frameallowfullscreen></iframe>
</div>
tùy thuộc vào thẻ iframe mà nó có thể khác thông số nên mình để chung chung thế này, lúc đăng bài bạn chỉ cần thay thẻ iframe bên trên bằng thẻ iframe nhúng video của bạn là ổn.

Lưu ý: trong trường hợp bạn không muốn video của mình nó nằm full chiều rộng của bài viết thì bạn có thể thêm thuộc tính max-width giới hạn cho .video-container ở trên phần CSS.

Lời kết

Chỉ đơn giản với một vài công đoạn nhỏ như vậy, bây giờ khi bạn chèn bất cứ video nào sử dụng thẻ iframe thì nó sẽ tự động co giãn theo màn hình đó.

Demo cho mấy bác khó tính:

12 bình luận

  1. avatar says

    lúc 19:10 14 tháng 7, 2014

    à mình cho height: 100% trong iframe nó vẫn tự động responsive....à bạn có biết tiện ích nào cho nhận xét mới nhất bằng bằng facebook không

  2. avatar says

    lúc 19:21 14 tháng 7, 2014

    Nhưng làm như vậy thì video nó responsive không đúng theo tỉ lệ, đơn chiều cao nó vẫn thế.

    Còn nhận xét mới nhất bằng facebook, thì hiện tại mình nghĩ chỉ có thể lấy ra comment mới nhất tại một bài viết cố định thôi chứ trên toàn trang thì thua rồi.

  3. avatar says

    lúc 19:26 14 tháng 7, 2014

    kiều cho yahoo mình đi có gì còn nhiều cái học hỏi, à sive chứ không phải size nhá hihi

  4. avatar says

    lúc 19:28 14 tháng 7, 2014

    Bỏ yahoo lâu rồi bạn ơi, dạo này đánh văn bản toàn lỗi chã biết sao khổ quá :(

  5. avatar says

    lúc 19:35 14 tháng 7, 2014

    Skype hay facebook không luôn hả ta

  6. avatar says

    lúc 19:52 14 tháng 7, 2014

    Skype: rainbow.lam25@gmail.com

  7. avatar says

    lúc 22:09 5 tháng 8, 2014

    không biết bạn có test chưa chứ mình thấy không ổn cho lắm

  8. avatar says

    lúc 22:11 5 tháng 8, 2014

    Test ròi mới dám đưa lên hcứ thấy bình thường mà để chèn demo vào cho coi.

  9. avatar says

    lúc 17:10 26 tháng 10, 2014

    Bạn ơi, mình nhờ tí...
    bây giờ mình muốn nhúng tivi và blog... nhưng mình lại muốn chèn 1 cái logo của mình ở phía trước nó để tạo ra cái riêng, khi phóng to hay thu nhỏ xem tivi thì cái logo vẫn nằm ở đúng 1 vị trí đó. bạn có cách nào ko bạn. cảm ơn bạn

  10. avatar says

    lúc 21:23 26 tháng 10, 2014

    Cho mình hỏi trước là bạn chèn tivi vào blog của bạn như thế nào?

  11. avatar says

    lúc 20:29 31 tháng 8, 2015

    bạn ơi sao của mình bị lỗi vậy bạn. nó hiện cái video đó toàn bộ web luôn. thật ra thì khắc phục được nhưng bị lỗi nó tự động phóng to ra toàn trang trong khi đó mình đã chỉnh độ cao vào chiều rộng bằng 0

  12. avatar says

    lúc 10:29 13 tháng 1, 2016

    có cách nào khi người ta click vào video nó chuyển sang trang khác rồi với phát được không anh giống video của haivn.com khi ở trang chủ có video click vào nó chuyển sang trang khác rồi nó với phát được ak

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.