 |
| 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&mute=1&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é !