菜单 eyoucms模板网

eyoucms使用教程
今天一个客户在编辑器里自己插入一个优酷的视频,发现PC端是很完美的,因为他自己设置了宽 和高,但在移动端发现下面空了很大一段。然后希望我帮他看看如何解决这个问题,这个其实就是一个自适应的问题,因为你把视频的高度固定死后,在不同的浏览器肯定是有问题,只能通过修改css来调整。下面是自适应css代码:<style> .ycnhwl { position:relative; p

引用优酷B站等外部视频播放如何自适应

发布时间:2022-10-30 20:55:02
点击次数:50
复制本文链接

今天一个客户在编辑器里自己插入一个优酷的视频,发现PC端是很完美的,因为他自己设置了宽 和高,但在移动端发现下面空了很大一段。

3f3faf15ea6bd57b807becf1c52150f.jpg


然后希望我帮他看看如何解决这个问题,这个其实就是一个自适应的问题,因为你把视频的高度固定死后,在不同的浏览器肯定是有问题,只能通过修改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的值哦,很重要,写了就又固定死了。

image.png


以上是修改后自适应效果。分享代码,供大家参考!

收藏

相关文章

加载中~
模板购买咨询
7.8折授权购买
点击这里给我发消息
24小时客服
18030990768
模板购买咨询
7.8折授权购买
点击这里给我发消息
24小时客服
18030990768