time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】13、CSS让嵌入式的视频在尺寸变化上变得更加灵活

【HTML5实践教程】13、CSS让嵌入式的视频在尺寸变化上变得更加灵活

时间:2012-12-05 23:45 点击:1083次 字体:[ ]




   当我编码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中的内嵌代码。

  1. video { 
  2.     max-width100%
  3.     heightauto

 

  灵活的 Object & Iframe 内嵌视频

  这个技巧相当简单,你需要为video添加一个<div>容器,并且将div的padding-bottom属性值设置在50%到60%之间。然后设置子元素(ifame或者object)的width和height为100%,并且使用绝对定位。这样会迫使内嵌对象自动扩充到最大。

  CSS

  1. .video-container { 
  2.     positionrelative
  3.     padding-bottom56.25%
  4.     padding-top30px
  5.     height0
  6.     overflowhidden
  7.  
  8. .video-container iframe,   
  9. .video-container object,   
  10. .video-container embed { 
  11.     positionabsolute
  12.     top: 0
  13.     left: 0
  14.     width100%
  15.     height100%

  HTML

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

 

  在固定宽度下实现灵活性

  如果限制了视频的宽度,那么我们需要一个额外的<div>容器包裹video,并为div设置固定宽度和max-width:100%。

  CSS

  1. .video-wrapper { 
  2.     width600px
  3.     max-width100%

 

  HTML

 

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

 兼容性

  这个技巧支持所有的浏览器,包括:Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone 和 iPad。

 

  原文地址:http://webdesignerwall.com/tutorials/css-elastic-videos

 

转自:http://www.cnblogs.com/softlover/archive/2012/11/29/2787558.html



本文地址 : http://www.fengfly.com/plus/view-210745-1.html
标签: HTML5 css
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: