博客插入自适应视频。

流年
流年
管理员
322
文章
447.8千
浏览
1 1,685字数 112阅读0分22秒

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

<div style="max-width:640px; margin:0 auto 32px;">
    <div style="position: relative; width:100%; padding-bottom:65%; height:0;">
        <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
                src="http://player.youku.com/embed/XMTMxNzQ4NzY3Ng==" 
                frameborder="0" 
                allowfullscreen></iframe>
    </div>
</div>

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

博客最后更新:2025-5-23
流年
  • 本文由 流年 发表于2015年8月24日 12:03:27
  • 除非特殊声明,本站文章均为原创,需要转载,请留言说明!
    • 懿古今
      懿古今 3

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

    匿名

    发表评论

    匿名网友
    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
    确定

    拖动滑块以完成验证