Nhúng video youtube chuẩn responsive

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

Bài viết này mình hướng dẫn các bạn cách Nhúng video youtube chuẩn responsive lên trang blogspot hoặc website của bạn đang sử dụng.

Nhúng video youtube lên trang blogspot hoặc website thì dễ còn làm cho nó responsive trên di động lại là một vấn đề khó cho nhiều bạn không am hiểu CSS.

Khó ở chỗ là Video không tự co giãn theo tỉ lệ khung hình, và dưới đây là cách Nhúng video youtube chuẩn responsive lên mọi thiết bị.

Bước 1: Thêm CSS trước thẻ đóng </b:skin> của blogspot mà bạn đang dùng.

.container-video{position:relative;width:100%;overflow:hidden;padding-top:56.25%}

.video-iframe{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none}

Bước 2: Khi nhúng video bạn theo HTML bên dưới

<div class="container-video"> 

  <iframe class="video-iframe" src="https://www.youtube.com/embed/64rYhA-Yf5A"></iframe>

</div>

Bạn chỉ cần thay ID video youtube của bạn vào cái ID màu xanh là được. Một số thuộc tính như tự động play, fullscreen thì bạn tự thêm.

Một số CSS căn tỉ lệ khung hình:

padding-top: 56.25%; // Tỉ lệ khung hình 16:9

padding-top: 75%; // Tỉ lệ khung hình 4:3

padding-top: 66.66%; // Tỉ lệ khung hình 3:2

padding-top: 62.5%; // Tỉ lệ khung hình 8:5

padding-top: 100%; // Tỉ lệ khung hình vuông 1:1

Bạn code thể xem responsive video youtube bên dưới.

Bài viết: Nhúng video youtube chuẩn responsive được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog