今天一个客户在编辑器里自己插入一个优酷的视频,发现PC端是很完美的,因为他自己设置了宽 和高,但在移动端发现下面空了很大一段。
然后希望我帮他看看如何解决这个问题,这个其实就是一个自适应的问题,因为你把视频的高度固定死后,在不同的浏览器肯定是有问题,只能通过修改css来调整。
下面是自适应css代码:
<style> .ycnhwl { position:relative; padding-bottom:45%; /*可以适当修改*/ height:0; overflow:hidden; } .ycnhwl iframe,.ycnhwl object,.ycnhwl embed { position:absolute; top:0; left:0; width:100%; height:100%; } </style>
引用视频有两种方式
1、在模板上固定位置引用:这种直接在模板上写好代码,首先在后台自定义多行的字段,比如 :shipin ,用于写iframe的代码,代码里要把width 和height的值删除
<div class="ycnhwl"> {$eyou.field.shipin|htmlspecialchars_decode=###} </div>
写好后每次要更新或者增加视频 只需要在后台字段里写iframe的代码即可。
2、在编辑器里插入,一般是和文章的内容混合插入。
<p class="ycnhwl"> <iframe src="iframe的代码内容" frameborder="0" scrolling="no" allowfullscreen=""></iframe></p>
同样不要写width 和height的值哦,很重要,写了就又固定死了。
以上是修改后自适应效果。分享代码,供大家参考!
相关文章