博客插入自适应视频。

流年
流年
流年
294
文章
377
评论
2015年8月24日12:03:271 669 431字阅读1分26秒

考虑到现在的博客主题都是自适应的,有的博客模板可能自带这个功能,有的没有,代码如下:

  1. <div style="max-width:640px; margin:0 auto 32px;" >  
  2. <div  
  3. style="position: relative;  
  4. width:100%;  
  5. padding-bottom:65%; /* 16:9 */  
  6. height:0;">  
  7. <iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" src="http://player.youku.com/embed/XMTMxNzQ4NzY3Ng==" frameborder=0 allowfullscreen></iframe>  
  8. </div>  
  9. </div>  

根据自己的站点的需要适当修改下margin和max-width,长宽比修改padding-bottom即可。

演示:

流年
  • 本文由 发表于 2015年8月24日12:03:27
  • 除非特殊声明,本站文章均为原创,需要转载,请留言说明!
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  1   博主  0
    • 懿古今 懿古今 3

      虽然分享视频的机会不是很多,但是折腾一个自适应的视频还是挺有必要的