如何插入自适应视频

考虑到移动设备的流行,博客插入的视频都是自适应性的。实现方式如下:

<div style="max-width:640px; margin:0 auto 32px;" >
<div 
style="position: relative; 
width:100%;
padding-bottom:65%; /* 16:9 */ 
height:0;">
<iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" src="视频地址" frameborder=0 allowfullscreen>
</iframe>
</div>
</div>

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

演示地址在这里:男女有别,风格迥异:Beat it  阿郎的故事



文章ID:448 。转载请注明:http://www.ithmz.com » 如何插入自适应视频

本人五毒俱全且有严重暴力倾向,现实生活中建议远离,否则后果自负。

《如何插入自适应视频》上有 31 条评论

  1. Pingback: 实用代码

  2. Pingback: 阿郎的故事 | 从良未遂

  3. Pingback: 给博客添加网络电视页面 | 从良未遂

  4. Pingback: 广电总局是怎么审查影片的 | Hi~记忆

  5. avatar

    骚年 这段代码我已经抄走了

    • avatar

      @Hi记忆 分享的意义就在于此 :grin:

  6. avatar

    飘一下吧 看八懂

    • avatar

      @hannah 用手机打开后演示文章底部的二维码,你骚骚看看效果就晓得了

  7. avatar

    我倒是很想知道 wordpress 正文如何图文混排。。

    新版WP 已支持该功能,但我不想更新。。

    • avatar

      @Finle 我也没有试过,但是这种排版方式倒是不错的。

  8. avatar

    只要 width:100%;同样适用于图片吧。

  9. avatar

    这个好,之前博客插入的视频,用手机访问看不了,这个可以解决么?

    • avatar

      @破折君 可以的,你看以看看演示页面。打开后文章底部有二维码,你骚骚

  10. avatar

    这个挺好 但是发布视频这样弄总觉得麻烦

  11. avatar

    新年快乐

    • avatar

      @Mr.童 新年快乐,兔。

  12. avatar

    简单点说,得多写几句CSS就对了,必须300以下,500以下,700以下等等。还有祝新年快乐

    • avatar

      @恋羽 事情都是这样,会者不难,难者不会,我是后一种情况。and,新年快乐,兔。

  13. avatar

    技术活,不懂。

    • avatar

      @an9 凡是技术类的东西都是别处搬过来存档的

  14. avatar

    这功能倒很实用,以前主要是图片自适应。现在视频也可以了哈。

    • avatar

      @王语双个人站 嗯,前提是主题是自适应的,不然,只是视频自适应就没有意思了。

  15. avatar

    元旦快乐!!!

    • avatar

      @alex 新年快乐,兔。

  16. avatar

    路过,看看。。。。

  17. avatar

    新年快乐·················

    • avatar

      @Me.稀奇 新年快乐,兔。

  18. avatar

    变身技术达人啦,哈哈

    • avatar

      @大发 你就拿我开玩笑,我什么水平你还没数吗?我是把用到的都记下来,备份用。上次你博客备案,我等了好久才添加上文章里添加表情的功能。

世界有你更精彩!

与 从良未遂 联络感情