Tạo Responsive Videos cho trang web của bạn bằng CSS

07/10/2013

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

Tạo Responsive Videos cho trang web của bạn bằng CSS

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 !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !