Hướng dẫn làm Responsive YouTube và Vimeo Videos

Hướng dẫn làm Responsive YouTube và Vimeo Videos

YouTube, Vimeo and other video hosts makes it easy to embed their players in your own website.

Hướng dẫn làm Responsive YouTube và Vimeo Videos

However, Youtube, Vimeo and others don't provide responsive videos by default.

In this short tutorial, we'll show you how to make YouTube, Vimeo and other videos responsive in your website, using just a few lines of CSS.

#1. Get the YouTube Embed Code

  • Go to Youtube.
  • Find the video you want to use on your website.
  • Click on Share >> Embed >> Right click and copy the HTML code.

responsivevideos 1

#2. Use the Embed Code

Paste this embed code in your website. It will look similar to this:

<iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>

#3.Modify the Embed Code

Add a div tag around the embed code. Use the CSS class video-responsive so that your code now looks like this:

<div class="video-responsive">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
</div>

Add the CSS

Now add some CSS properties inside one of your stylesheet files:

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

Your videos now will be responsive. Try resizing your browser to see it in action.

This same process works for Vimeo videos and any other service that uses an iframe tag.

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Bình luận (0)

 

Add Comment

Filtered HTML

  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Các thẻ HTML được chấp nhận: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Tự động ngắt dòng và đoạn văn.

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
 Asus ROG TYTAN CG8890

Giới thiệu sản phẩm công nghệ nổi bật tại IFA 2012

Các thiết bị Windows 8 đầy sáng tạo, những mẫu máy tính bảng mới hấp dẫn, hàng loạt mẫu smartphone mới và các loại camera thông minh hơn, nhiều model TV 3D không cần kính... đang đua nhau trình diễn.

PlugBug - Cùng sạc MacBook và iPad

PlugBug - Cùng sạc MacBook và iPad

PlugBug cục sạc đa năng gọn nhẹ tương thích với các sản phẩm iApple, dành cho người hay đi xa.

Rò rỉ thông số kĩ thuật của máy ảnh Sony Cyber-shot RX100 MkII

Rò rỉ thông số kĩ thuật của máy ảnh Sony Cyber-shot RX100 MkII

Sau khi tung ra Cyber-shot RX100 cách đây không lâu, có vẻ như Sony muốn tiếp tục gây ấn tượng với người dùng với kế hoạch phát hành Cyber-shot RX100 MkII.

Công ty diệt chuột T&C

 

Diet con trung