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

本文目录[隐藏]

  • 1视频自适应方法
  • 2方法扩展:给后台文章文本编辑器添加按钮的方法

最近经常有网友询问,我的视频是怎样做到自适应宽高度的?在此龙笑天下就来说下具体的实现方法,及给后台文章文本编辑器添加按钮的方法技巧!

how-to-insert-adaptive-video

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

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

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

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

视频自适应方法

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

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

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

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

方法扩展:给后台文章文本编辑器添加按钮的方法

如果我们贴视频,每次都填写这么多代码的话,那不就既枯燥又麻烦死!那么怎么解决呢?

我们可以通过在后台文本编辑器上面加上一些按钮的方法来避免这种重复的输入,因为视频网站提供的视频引用代码都是有共同性的!

好了,直接给出比较全的代码吧,在functions.php中加入以下代码,就可以在后台文本编辑器上面加上下面这些短代码了:

how-to-insert-adaptive-video-2

友情提示:其它视频网站根据各自视频网站提供的引用方式代码可自行增添修改吧!不仅是以上这些按钮,还可以加入一些其它的功能按钮哦!

代码解析:

四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),\n表示换行;
形象说明: QTags.addButton( ' 按钮ID', '按钮显示名', '点一下输入内容', '点一下关闭内容' );
可以自定义添加多行QTags.addButton( '', '', '', '' );增加多个按钮!

原文:http://www.ilxtx.com/how-to-insert-adaptive-video.html

版权免责声明

① 本站VIP源码资源永久免费下载 www.wayu.cn
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,或者点击 投稿
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

评论0

请先

没有账号? 忘记密码?