BANNER HTML1

Hướng dẫn cách thiết lập khung Frame Video Youtube full trang Blogspot mới nhất

Hướng dẫn cách thiết lập khung Frame Video Youtube full trang Blogspot mới nhất
Hướng dẫn cách thiết lập khung Frame Video Youtube full trang Blogspot mới nhất
Vấn đề đặt ra: làm thế nào để tùy chỉnh khung màn hình video Youtubemặc định khi post lên Blogspot

Mục đích: Để thiếp lập giúp màn hình video được full rộng bằng chiều rộng trang bài viết trên Blogspot. Hình ảnh hiển thị đẹp và đầy đủ nhất, không bị crop cắt mất hình.

Giải pháp: Các bước thực hiện như sau:

Bước 1: Chúng ta thiết lập định dạng khung video youtube mặc định cho Blogspot:
Vào CSS Template. Ctrl + F tìm đến thẻ ]]></b:skin> và dán đoạn CSS bên dưới lên trên nó

/* Youtube Reflexive */
.video-container {position:relative;padding-bottom:50%;padding-top:41px;height:0; overflow:hidden; }
.video-container iframe, .video-container object, .video-container embed {position:absolute;top:0;left:0;width:100%;height:100%; }
Save lưu lại Template lại !

Bước 2 : Trong phần bài viết dán đoạn code hiển thị khung video Youtube bên dưới vào nơi cần chèn Video trong bài viết

<div class="video-container">
<iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="auto" src="https://www.youtube-nocookie.com/embed/idvideo?autoplay=1&amp;mute=1&amp;enablejsapi=1" width="auto"></iframe>
</div>

Trong đó, idvideo các bạn thay bằng ID Video của bạn vào.

VD: https://www.youtube.com/watch?v=ixQEJhRdwe => đây là ID Video


Vậy là xong rồi nhá. Chúc các bạn thành công nhé !
Admin
Đăng nhận xét (0)
Mới hơn Cũ hơn

Quảng Cáo (HTML4)

BANNER HTML4

Quảng Cáo (HTML5)

BANNER HTML5
ĐĂNG KÝ KÊNH NHÉ