當我編碼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的padding-bottom屬性值設定在50%到60%之間。然後設定子元素（ifame或object）的width和height為100%，並使用絕對定位。這樣會迫使內嵌物件自動擴充到最大。
CSS 複製程式碼
代碼如下:
>.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hiddenpx;
height: 0;
overflow: hiddenpx;
height: 0;
overflow: hidden>;
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0
>width: 100%;
height: 100%;
} 複製程式碼
程式碼如下:
在固定寬度下實現靈活性
