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%; }

Uy Tín 5 Năm đã khẳng định

Thái Bình Web - Thiết kế web chuẩn SEO

Email : khuong3012@gmail.com

Skype : khuong3012

Uy tín - Chất Lượng - Tận Tâm

Làm việc Online Toàn Quốc

MST : 8306851644

Người đại diện : Ngô Duy Khương

Địa chỉ : Phúc Khánh - Hưng Hà - Thái Bình

Số điện thoại : 0988.392.366

Mã số thuế : 8306851644

Ngày cấp mã số thuế : 22/03/2013

Cơ quan quản lý : Chi cục Thuế Quận Cầu Giấy

Zalo : 0988.392.366
0988.392.366
1
Bạn cần hỗ trợ?