CSS: 可伸缩的视频

2011-06-03 01:55:28

<p><br></p><p>当我在写Elemin主题(一个我最近在设计的WordPress主题)时候,遇到了一个必须面对的问题:我必须要使嵌入的视频可以伸缩。使用max-width:100%和height:auto在HTML5的video标签中有效,但是如果嵌入的代码中含有iframe或者object标签的话就不行了。经过几小时的试验和Google,我终于成功了。如果你也正在创建一个响应设计,这个简单的CSS技巧会派上用场的。调整一下你的浏览器窗口,看看最后的demo吧。</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p>可伸缩的HTML5视频(demo)</p><p><br></p><p>使用HTML5的video元素,在里面添加max-width:100%,在上面的介绍中提到,如果内嵌的代码中有使用到iframe 或者object标签的话,这个技巧就不生效了。</p><p><br></p><pre class="ql-syntax" spellcheck="false">video { max-width: <span class="hljs-number">100</span>%; height: auto;&nbsp; } </pre><p><br></p><p>内嵌iframe 和object标签的可伸缩视频(demo)</p><p><br></p><p>这个技巧非常简单。你需要用一个</p><p><br></p><p>容器把代码包起来,并且把padding-bottom的值设为50%-60%。然后把子元素(内嵌的iframe, object)设为width :100%, height:100%,position :bsolute 。这样就可以强行让内嵌的元素的宽度自动最大化了。</p><p>CSS</p><pre class="ql-syntax" spellcheck="false">.video-container { &nbsp;<span class="hljs-attr">position</span>: relative; &nbsp;padding-bottom: <span class="hljs-number">56.25</span>%; padding-top: <span class="hljs-number">30</span>px; height: <span class="hljs-number">0</span>; overflow: hidden; } .video-container iframe,&nbsp;.video-container object,&nbsp;.video-container embed { <span class="hljs-attr">position</span>: absolute; top: <span class="hljs-number">0</span>; left: <span class="hljs-number">0</span>; width: <span class="hljs-number">100</span>%; height: <span class="hljs-number">100</span>%; } </pre><p>HTML</p><p>[html]</p><p>&lt;div class="video-wrapper"&gt;</p><p> &lt;div class="video-container"&gt;</p><p>&lt;iframe src="about:blank" width="800" height="450" frameborder="0"&gt;&lt;/iframe&gt;</p><p>&lt;/div&gt;&lt;!-- /video --&gt;</p><p>&lt;/div&gt;&lt;!-- /video-wrapper --&gt;</p><p>[/html]</p>