Popular categories

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é !
Welcome to TienNetwork.com - Blog sưu tầm và chia sẻ kiến thức Online, tất cả các nội dung trên blog được chúng tôi sưu tập và tổng hợp từ nhiều nguồn trên Internet. Nếu có vấn đề về bản quyền với bài viết trên Blog vui lòng liên hệ qua mail: tiennetwork@gmail.com. Chúng tôi sẽ xóa bài viết ngay lập tức.

Đăng nhận xét

0 Nhận xét