quang cao hosting

Hướng dẫn tạo Responsive Videos cho trang web của bạn bằng CSS

Xem: 1348    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

10 điểm   ( 7 đánh giá ) File đã được kiểm thử

Với việc người dùng hiện nay có nhiều cơ hội lướt web trên các thiết bị di động khác nhau, vì thế trang web có thiết kế tương thích với độ phân giải màn hình của các thiết bị đó là điều cần thiết. Mình đã giới thiệu với các bạn nhiều bài viết để làm điều này như : Từng bước tạo Responsive Form với CSS3 và HTML5 . Hôm nay mình sẽ chia sẻ với các bạn thêm một thủ thuật tạo kỹ thuật này cho những web sử dụng video

Bước 1 : Markup HTML

Chúng ta sẽ tạo bộ khung html để minh họa như sau :

<head>
<title>Demo: Elastic Videos</title>
</head>
 
<body>
<div id="pagewrap">
<h1>
<h2>Resize your browser window to see the elastic videos</h2>
<h3>New YouTube Code (iframe)</h3>
<div class="video-container">
<iframe width="853" height="510" src="http://www.youtube.com/embed/3R2cnxz27LI" frameborder="0" allowfullscreen=""/>
</div>
<h3>Old YouTube Code (embed)</h3>
<div class="video-container">
<object width="500" height="400">
<param name="movie" value="http://www.youtube.com/v/NmRTreaCJXs?version=3"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="wmode" value="transparent"/>
<embed wmode="transparent" src="http://www.youtube.com/v/NmRTreaCJXs?version=3" type="application/x-shockwave-flash" width="600" height="420" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
<h3>With fixed 600px wide wrapper</h3>
<div class="video-wrapper">
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"/>
</div>
</div>
<h3>With fixed 500px wide wrapper</h3>
<div class="video-wrapper2">
<div class="video-container">
<object width="500" height="400">
<param name="movie" value="http://www.youtube.com/v/NmRTreaCJXs?version=3"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="wmode" value="transparent"/>
<embed wmode="transparent" src="http://www.youtube.com/v/NmRTreaCJXs?version=3" type="application/x-shockwave-flash" width="600" height="420" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
</div>
</body>

Bước 2  : CSS

Chúng ta sẽ tiến hành tạo kỹ thuật responsive cho video bằng css sau đây:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
/* video fixed width wrappers */
.video-wrapper {
    width: 600px;
    max-width: 100%;
}
.video-wrapper2 {
    width: 500px;
    max-width: 100%;
}

Rất đơn giản và dễ thực hiện phải không các bạn. Chúc các bạn thành công !

Hướng dẫn tạo Responsive Videos cho trang web của bạn bằng CSS

Hướng dẫn tạo Responsive Videos cho trang web của bạn bằng CSS Đăng ngày 21-08-2014  Với việc người dùng hiện nay có nhiều cơ hội lướt web trên các thiết bị di động khác nhau, vì thế trang web có thiết kế tương thích với độ phân giải màn hình của các thiết bị đó là điều cần thiết. Mình đã giới thiệu với các bạn nhiều bài viết để làm điều này như : Từng bước tạo Responsive Form với CSS3 và HTML5 . Hôm nay mình sẽ chia sẻ với các bạn thêm một thủ thuật tạo kỹ thuật này cho những web sử dụng video 1.4285714285714/10 1348

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2021. All rights reserved. Bản quyền thuộc VinaGon
Email: info@vinagon.com
Hotline: 086.924.3838