如何插入自适应视频

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

<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 条评论

世界有你更精彩!

与 从良未遂 联络感情