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

Chèn video YouTube vào Blogger giúp làm phong phú nội dung và tăng tính hấp dẫn cho bài viết. 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ã HTML và CSS phù hợp. Bài viết này sẽ hướng dẫn bạn cách nhúng video YouTube vào Blogger với tỷ lệ chuẩn 16:9.

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

1. Thêm CSS vào Blogger

Để đảm bảo video hiển thị đúng tỷ lệ, bạn cần thêm một đoạn mã CSS vào Blogger:

Bước 1: Truy cập Giao diện > Tùy chỉnh > Chỉnh sửa HTML.
Bước 2: Dán đoạn mã CSS sau 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%; }

2. Chèn Mã Nhúng Video YouTube Vào Bài Viết Blogger

Bước 1: Truy cập Bài đăng > Chế độ xem HTML.
Bước 2: Dán đoạn mã sau vào nơi bạn muốn hiển thị video:

<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.

3. Hiển Thị Thumbnail Của Video YouTube

Nếu bạn muốn hiển thị ảnh thu nhỏ (thumbnail) của video trước khi phát, hãy thêm đoạn mã sau:

<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

Kết Luận

Bằng cách sử dụng CSS và mã nhúng trên, bạn có thể đảm bảo video YouTube hiển thị đúng tỷ lệ và tối ưu hóa tốc độ tải trang. Hãy áp dụng ngay để làm cho Blogger của bạn chuyên nghiệp và hấp dẫn hơn!