本文外鏈視頻以優(yōu)酷和騰訊視頻為講解資源。
當(dāng)你在web中嵌入外部來(lái)的資源時(shí),可以通過(guò)iframe來(lái)嵌入：
//優(yōu)酷
（幻城第一集）
<iframe height=498 width=510 src="http://player.youku.com/embed/XMTY1OTM2MjA4NA==" frameborder=0 allowfullscreen></iframe>
//騰訊
（幻城第一集）
<iframe frameborder="0" width="640" height="498" src="http://v.qq.com/iframe/player.html?vid=j0020qc692d&tiny=0&auto=0" allowfullscreen></iframe>
嵌入之后再瀏覽器中顯示：
（優(yōu)酷）
Paste_Image.png
（騰訊）
Paste_Image.png
細(xì)心的你會(huì)發(fā)現(xiàn)：優(yōu)酷iframe: width="510" height="498"，騰訊iframe: width="640" height="498",恩？說(shuō)好的視頻資源比例是4:3 或者 16:9, 則么優(yōu)酷搞個(gè)性，不遵循基本法則么？
再細(xì)細(xì)一量，你會(huì)發(fā)現(xiàn)：好像錯(cuò)怪了優(yōu)酷。如果你量下騰訊和優(yōu)酷的實(shí)際有效畫(huà)面，你會(huì)發(fā)現(xiàn)，兩者比例都接近：16：9。所以各位前端大神么，以后外鏈插入視頻的時(shí)候，不能再相信iframe的寬高就是視頻的寬高比例了，否則，要么視頻畫(huà)面會(huì)被扭曲，要么會(huì)出現(xiàn)多余的黑邊框。
接下來(lái)該進(jìn)入主題，如何解決頁(yè)面外鏈視頻的響應(yīng)式效果了。
響應(yīng)式的視頻
首先我們給包含iframe的div容器中添加一個(gè)類(lèi)名video-container，樣式表如下：
.video-container {
position: relative; //為了給iframe設(shè)置absolute值
padding-bottom: 56.25%; //以我們實(shí)例中:16:9, 如果寬高比是4:3,那就是75%；
padding-top: 30px; 給視頻資源一個(gè)空間，上下留點(diǎn)黑白
height: 0; 因?yàn)槲覀兺ㄟ^(guò)padding-bottom來(lái)設(shè)置高度，所以沒(méi)必要設(shè)置高度。
overflow: hidden; 確保溢出的內(nèi)容能夠隱藏起來(lái)
}
.video-container iframe {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
效果顯示：
（優(yōu)酷）
Paste_Image.png
（騰訊）
Paste_Image.png
感覺(jué)效果還行吧?。?！
參考文獻(xiàn)：http://www.w3cplus.com/responsive/making-embedded-content-work-in-responsive-design.html
