wp使插入的FLASH视频自适应宽高度及为后台编辑器添加自定义按钮

2018年7月12日02:04:33 发表评论 108
摘要

记得我当初也发现了这样的问题,通过视频网站分享的视频代码(embed、object或iframe方式)贴到文章里发布后,在电脑上看可能会好好的,但是在手机的浏览器上看就会超出屏幕

wp使插入的FLASH视频自适应宽高度及为后台编辑器添加自定义按钮

表格还好直接用百分比就可以自适应,但是Iframe的宽度属性设置了百分比的话,高度不能自适应屏幕。把高度设置成百分比,就会出现一个长方形的视频,自己试过就知道了。

网上也有一大堆的解决办法,尝试了很多发现起作用的并没有几个,也没有能让我满意的适用所有网站的方法。

后来终于找到一篇文章解决了这个问题,原来视频自适应这么简单,只需要一段css代码就ok了……具体效果可点我查看。

视频自适应方法

首先,在主题的主css,如style.css中加入以下css代码:

.lxtx-video {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}
.lxtx-video iframe,.lxtx-video object,.lxtx-video embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

然后,后台发布视频时,建议以Iframe方式引用视频网站的视频,因为iframe方式在pc端和手机端都能完美显示视频,另外2种方式就不一定了!在中文本模式编辑器里用下面的类似方法引用:

<p class="lxtx-video"><iframe src="视频网站提供的iframe方式里的src链接" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

以优酷视频为例,如这个视频:http://v.youku.com/v_show/id_XMTU2MzI4MTE5Ng==.html,用它的通用方式(也就是iframe方式),它提供的代码如下:

<iframe height=498 width=510 src="http://player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder=0 allowfullscreen></iframe>

那么我们要在文章中插入自适应视频的话,在文本编辑器中要插入以下代码就ok了:

<p class="lxtx-video"><iframe src="http://player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
weinxin
我的微信
本站专注IT互联网领域,分享有用的教程和资源,目的就是希望大家共同进步,一起学习!
IT教程网

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: