iframe,object,embed标签嵌入视频后,宽高度自适应的css技巧
有时网站后台发布转载文章,而文章中带有视频,这个视频通常是采用iframe方式嵌入的。如下代码:
<iframe src="视频地址" frameborder="0" allowfullscreen="true"></iframe>
如果在发布时清除了原来的格式,那么这个嵌入的视频也随之变得很小。如下图。
下面这个方法,经过测试是可行的。
把以下css文件,放到网站使用的样式表文件的最后。
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
然后在发布文章时,切换至html标签,在视频标签,iframe,或object,或embed的上级html标签中(对比上面的css文件层级),加入class="video"即可。例如,上级标签是<p>:
<p class="video"><iframe src="视频地址" frameborder="0" allowfullscreen="true"></iframe></p>
刷新网站的样式文件及页面,发现变了!
扫描二维码推送至手机访问。
版权声明:本文由 声光视趣 - blog.lavfun.com 发布,如需转载请注明出处。