中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

當我編碼Elemin Theme（我最近設計的一個響應式的站點）的時候，我遇到的一個跳幀就是，如何能讓嵌入式的視頻在尺寸變化上變得更加靈活。使用max-width:100% 和height:auto可以讓html5的video標簽很好的工作，但是這個解決方案不適用于iframe 或者 object標簽的內嵌代碼。通過幾小時的尋找資料和實驗，我最終找到了解決辦法。當你在進行響應式設計的時候，這一css技巧能派上用場。

靈活的html5 video標簽

使用html5的video，可以通過設置max-width:100%讓他變得靈活。前面的介紹中，已經提到他不適用于常用的iframe和object中的內嵌代碼。

代碼如下:

video {

max-width: 100%;

height: auto;

}

靈活的Object & Iframe 內嵌視頻

這個技巧相當簡單，你需要為video添加一個<div>容器，并且將div的padding-bottom屬性值設置在50%到60%之間。然后設置子元素（ifame或者object）的width和height為100%，并且使用絕對定位。這樣會迫使內嵌對象自動擴充到最大。

CSS

代碼如下:

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

}

HTML

代碼如下:

<div class="video-container">

<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>

</div>

在固定寬度下實現靈活性

如果限制了視頻的寬度，那么我們需要一個額外的<div>容器包裹video，并為div設置固定寬度和max-width:100%。

CSS

代碼如下:

.video-wrapper {

width: 600px;

max-width: 100%;

}

HTML

代碼如下:

<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"></iframe>

</div>

<!-- /video -->

</div>

<!-- /video-wrapper -->

兼容性

這個技巧支持所有的瀏覽器，包括：Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone 和 iPad。