Chat facebook : circle, facebook icon  |  ZALO : 0988.392.366

Chia Sẻ

Làm thế nào để nhúng youtube Responsive sử dụng CSS

Bạn đánh giá: 5 / 5

Ngôi sao có hiệu lựcNgôi sao có hiệu lựcNgôi sao có hiệu lựcNgôi sao có hiệu lựcNgôi sao có hiệu lực
 

Trước khi các thiết bị di động, máy tính bảng và một loạt toàn bộ các kích thước màn hình nó là khá thẳng về phía trước để nhúng một đoạn video youtube. Bạn đã chọn kích thước video từ trang Youtube, sao chép mã nhúng và thêm vào đó trang web của bạn.

Rất dễ. Bây giờ trong thế giới của các mẫu đáp ứng nó trở nên tham gia nhiều hơn một chút để nhúng một đoạn video. Nếu bạn chỉ định một iframe rộng 600px sau đó video sẽ nhìn tốt trên một máy tính để bàn và màn hình rộng hiển thị nhưng rất có thể sẽ có hai rộng cho các thiết bị di động. May mắn cho chúng tôi có một số thủ thuật để giải quyết vấn đề này. Trong bài viết này, chúng tôi đã quyết định explian nó sử dụng css

1. Most videos will come witht he following code

 

<iframe width="560" height="315" src="http://youtube.com/embed/YVx3CoxeLpc?rel=0" frameborder="0" allowfullscreen></iframe>

 


2. Let's stripp that code back and remove the dimensions so it looks like this:

 

<iframe src="http://youtube.com/embed/YVx3CoxeLpc?rel=0" frameborder="0" allowfullscreen></iframe>

 


3. Now wrap a div around the iframe so it looks like the following:

 

<div class="responsive-video-container"><iframe src="http://youtube.com/embed/YVx3CoxeLpc?rel=0" frameborder="0" allowfullscreen></iframe></div>

 


4. Add the following css to your style sheet to target the above and whola, you have a fluid responsive embeded video!

 

.responsive-video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.responsive-video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Zalo : 0988.392.366
0988.392.366