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.