使用CSS实现弹性视频html5案例实践


Posted in HTML / CSS onDecember 26, 2012

当我编码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>容器,并且将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: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML
复制代码
代码如下:

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

在固定宽度下实现灵活性
如果限制了视频的宽度,那么我们需要一个额外的<div>容器包裹video,并为div设置固定宽度和max-width:100%。
CSS
复制代码
代码如下:

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

HTML
复制代码
代码如下:

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

兼容性
这个技巧支持所有的浏览器,包括:Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone 和 iPad。
HTML / CSS 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 #HTML / CSS
html5 application cache遇到的严重问题
Dec 26 #HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 #HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 #HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 #HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 #HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 #HTML / CSS
You might like
PHP4中实现动态代理
2006/10/09 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
python简单实现计算过期时间的方法
2015/06/09 Python
python模块导入的细节详解
2018/12/10 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
简单了解django缓存方式及配置
2019/07/19 Python
python 画函数曲线示例
2019/12/04 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
python如何将图片转换素描画
2020/09/08 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
会计实习生自我鉴定
2013/12/12 职场文书
公民授权委托书
2014/10/15 职场文书
倡议书范文大全
2015/04/28 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
中学校园广播稿
2015/08/18 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书