Cách Chèn Video YouTube Vào Blogger Với Khung Hình Cố Định

Chèn video YouTube vào bài viết trên Blogger là một cách tuyệt vời để làm phong phú nội dung blog. Tuy nhiên, để video hiển thị đẹp và không bị mất tỷ lệ khung hình, bạn cần sử dụng một số mã HTML và CSS. Bài viết này sẽ hướng dẫn bạn cách chèn video YouTube vào Blogger với khung hình cố định, đảm bảo video luôn hiển thị đúng tỷ lệ 16:9.

Để chèn video YouTube vào Blogger với khung hình cố định, bạn có thể sử dụng mã HTML và CSS.

* Thêm CSS vào Blogger

• Trong bảng điều khiển Blogger, vào Giao diện > Tùy chỉnh > Chỉnh sửa HTML.
• Dán đoạn mã CSS dưới đây vào ngay trước thẻ </head>

.embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; }.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

* Chèn mã nhúng vào bài viết Blogger

• Truy cập Bài đăng > Chế độ xem Html 
• Dán đoạn mã chứa video bạn muốn nhúng

<div class="embed-container"><div style="text-align: center;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/ID_VIDEO"></iframe></div></div>

Thay thế ID_VIDEO bằng ID của video YouTube bạn muốn nhúng.

* Ngoài ra nếu bạn muốn Blogger của bạn hiện thị thumbnail của Youtube bạn có thể chèn thêm đoạn mã

<img src="https://img.youtube.com/vi/ID_VIDEO/0.jpg" style="display: none;" />

• <img>: Thẻ HTML để hiển thị một hình ảnh.
• src="https://img.youtube.com/vi/ID_VIDEO/0.jpg": Địa chỉ URL của hình ảnh.
• style="display: none;": Thuộc tính CSS này ẩn hình ảnh khỏi người dùng khi trang web được tải. Điều này có nghĩa là hình ảnh sẽ không hiển thị trên giao diện người dùng. Nếu muốn hiển thị ảnh bạn chỉ cần xóa nó đi

Video YouTube sẽ được hiển thị với tỷ lệ khung hình cố định (16:9) và tự động điều chỉnh kích thước khi bạn thay đổi kích thước trình duyệt.