Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Nhúng video youtube chuẩn responsive

1 min read

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.


You may like these posts

  • Rất nhiều mẫu template Blogspot được chia sẻ tại giaodien.blog, thì bạn có thể chọn lựa cho mình những template phù hợp nhất với nhu cầu sử dụng website của mình.Nhiều theme Blogsp…
  • Sau đây mình hướng dẫn các bạn Tạo khung đăng ký Email bằng HTML CSS JS đơn giản hiệu ứng đẹp, giúp cho khách hàng hay độc giả để lại email trên trang web của bạn.Từ đó giúp cho bạ…
  • Hướng dẫn các bạn code Javascript định dạng số phân cách hàng nghìn phân cách bằng dấu phẩy hoặc dấu chấm, Code javascript định dạng số phân cách hàng nghìn, Format …
  • Bài viết này mình Hướng dẫn các bạn cách đăng ký Google News cho Blogspot. Google News là gì?Google News là một trang web tổng hợp tin tức tự động được cung cấp bởi Goo…
  • Dịch vụ đánh giá Google Maps, Review google maps.TẠM NGƯNG DỊCH VỤ NÀYBạn đang là chủ cửa hàng doanh nghiệp, shop, dịch vụ, quán ăn, quán cà phê,…. bạn muốn tăng đánh giá 5 sao, gi…
  • Dưới đây là một số cách giúp bạn Ẩn hoặc xóa hình đầu tiên của bài viết blogspot, hình đầu tiên của bài viết blogspot đó chính là thumbnail, ảnh nhỏ của bài viết.Khi…

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Learn More