如何插入自适应视频

插入自适应媒体已经是刚需了，以前也介绍过一种姿势，貌似这个更简单一些。当在你自己的网站插入优酷这样的视频播放器后你会发现它的高宽都是固定的，而且你在用手机浏览的时候视频播放器还变形了，以下代码自动让播放器按16:9的比例显示并自适应各个设备。理论上，其它视频网站的视频也可以使用这种方式插入。

CSS代码：

.media-wrap {
 position: relative;
//改为max-width，并添加!important
 max-width: 100% !important;
 height: 0;
 padding-bottom: 45%;
//增加margin-bottom
 margin-bottom:20px;
}
//增加判断是否为@media
@media (max-width:736px){
 .media-wrap {
 padding-bottom: 56.25%;
 }
}
.media-wrap iframe,
.media-wrap embed,
.media-wrap object {
 position: absolute;
 top: 0;
 left: 0;
//改为max-width，并添加!important
 max-width: 100% !important;
 height: 100% !important;
}

HTML代码：

<div class="media-wrap">
<iframe height=498 width=510 src="http://player.youku.com/embed/XMTQzOTUyNjAyMA==" frameborder=0 allowfullscreen></iframe>
</div>

embed代码在苹果iOS上无法正常显示，只能采用iframe。之前的CSS代码，在电脑上就被直接拉伸为100%了；另外如果两段video代码连续放置，会首尾连接在一起。解决方案是更改width为max-width，以及增加margin-bottom。

感谢竹炉山房：http://talk.synyan.net/15092.html