在页面中嵌入自适应视频的方法

准备在博客中嵌入视频,从视频网站获取的embed代码是指定宽度和高度的,这样在一些窗口或者移动端进行访问的时候,就可能视频溢出屏幕了,体验不好,实际上这几年响应式网站比较流行,也就是能让内容自动的适应窗口的大小

屏幕的宽度可以用 width:100% 进行设置,高度看到有个 height:100% 设置后height实际取的是上一层的高度的百分比,如果没设置的话,这个就为0,看到嵌入的视频就没有高度了,网上关于这个的资料很多,可以搜索下

关于视频的自适应看到 google 自适应设置建议 这个介绍的很好

主要是这段代码:

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

上面的56.25%实际是16:9的视频的值,这个可以根据自己的视频高宽比进行设置

我自己的代码是这样的:
css的代码

.article-entry .video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.article-entry .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.article-entry .video-container object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

嵌入的页面html代码为:

<div class="video-container"> <object>
<param name="allowFullScreen" value="true"><param name="flashVars" value="id=23750026 " /><param name="movie" value="http://i7.imgs.letv.com/player/swfPlayer.swf?autoplay=0" /><embed src="http://i7.imgs.letv.com/player/swfPlayer.swf?autoplay=0" flashVars="id=23750026"allowFullScreen="true" type="application/x-shockwave-flash" ></embed></object>
</div>

添加了一个class标签,去掉了网站视频分享代码里面的width和height的值
下面为一个视频的例子:可以调整浏览器查看效果


ps:测试了很多网站的视频上传,发现还是乐视的清晰度最高,没有压缩很多,并且视频提供高清的观看