HTML5實踐-使用CSS實現彈性影片的程式碼分享-H5教程-PHP中文網

HTML5實踐-使用CSS實現彈性影片的程式碼分享

黄舟

發布： 2017-03-23 15:26:20

原創

1700 人瀏覽過

　　當我編碼Elemin Theme（我最近設計的一個響應式的站點）的時候，我遇到的一個跳幀就是，如何能讓嵌入式的視頻在尺寸變化上變得更加靈活。使用max-width:100% 和height:auto可以讓html5的video標籤很好的工作，但是這個解決方案不適用於iframe 或 object標籤的內嵌程式碼。透過幾個小時的尋找資料和實驗，我最終找到了解決方案。當你在進行響應式設計的時候，這項css技巧能派上用場。你可以訪問最終demo地址，縮放你的瀏覽器查看效果。

　　靈活的html5 video標籤（demo）

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

video {
    max-width: 100%;
    height: auto;
}

登入後複製

　　靈活的Object & Iframe 內嵌影片

　　這個技巧相當簡單，你需要為video添加一個

容器，並且將p的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

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

登入後複製

　　在固定寬度下實現靈活性

　　如果限制了視訊的寬度，那麼我們需要一個額外的

容器包裹video，並為p設定固定寬度和max-width:100%。

　　CSS

.video-wrapper {
    width: 600px;
    max-width: 100%;
}

登入後複製

　　HTML

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

登入後複製