HTML5实践 -

下一站永远

<div id="cnblogs_post_body">　　转载请注明原文地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787558.html

　　当我编码Elemin Theme（我最近设计的一个响应式的站点）的时候，我遇到的一个跳帧就是，如何能让嵌入式的视频在尺寸变化上变得更加灵活。使用max-width:100% 和height:auto可以让html5的video标签很好的工作，但是这个解决方案不适用于iframe 或者 object标签的内嵌代码。通过几小时的寻找资料和实验，我最终找到了解决办法。当你在进行响应式设计的时候，这一css技巧能派上用场。你可以访问最终demo地址，缩放你的浏览器查看效果。

　　demo查看地址：http://webdesignerwall.com/demo/elastic-videos

　　灵活的html5 video标签（demo）

　　使用html5的video，可以通过设置max-width:100%让他变得灵活。前面的介绍中，已经提到他不适用于常用的iframe和object中的内嵌代码。
<div class="cnblogs_code">video {    max-width: 100%;    height: auto;}