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

2016-05-18 23:01 2,104 38 条评论龙笑天下 20

龙笑天 互助分享，互联网本该如此！

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

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

表格还好直接用百分比就可以自适应，但是 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="https://player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder=0 allowfullscreen></iframe>

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

<p class="lxtx-video"><iframe src="https://player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

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

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

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

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


/**
 * 使插入的 FLASH 视频自适应长宽及为后台编辑器添加自定义按钮
 * https://www.ilxtx.com/how-to-insert-adaptive-video.html
 */
// wordpress 后台 HTML 编辑器添加自定义快捷标签按钮
 add_action('after_wp_tiny_mce', 'lxtx_bolo_after_wp_tiny_mce');
 function lxtx_bolo_after_wp_tiny_mce($mce_settings) {
    ?>
    <script type="text/javascript">    
    QTags.addButton( 'youkushipinjm', 'youku', 
    '<p class="lxtx-video"><iframe src="https://player.youku.com/embed/视频特征 ID" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );  
    QTags.addButton( 'acfunshipinjm', 'AcFun', 
    '<p class="lxtx-video"><iframe src="http://cdn.aixifan.com/player/ACFlashPlayer.out.swf?type=page&url=http://www.acfun.tv/v/视频特征 ID" id="ACFlashPlayer-re" frameborder="0"></iframe></p>\n', "" );
    QTags.addButton( 'qqshipinjm', 'QQ', 
    '<p class="lxtx-video"><iframe frameborder="0" src="通用代码中的 src 地址" allowfullscreen></iframe></p>\n', "" );
    QTags.addButton( 'iqiyishipinjm', '爱奇艺',
	'<p class="lxtx-video"><iframe src="通用代码中的 src" frameborder="0" allowfullscreen="true"></iframe></p>\n', "" );
    QTags.addButton( 'yinyuetaishipinjm', '音悦台', 
    '<p class="lxtx-video"><embed src="代码中的 src" quality="high" align="middle"  allowScriptAccess="sameDomain" allowfullscreen="true" type="application/x-shockwave-flash"></embed></p>\n', "" );
    QTags.addButton( 'souhushipinjm', '搜狐', 
	'<p class="lxtx-video"><iframe src="通用代码中的 src" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );
    QTags.addButton( '56shipinjm', '56', 
    '<p class="lxtx-video"><iframe src="http://www.56.com/iframe/视频特征 ID" frameborder="0" allowfullscreen=""></iframe></p>\n', "" );
	QTags.addButton( 'tudoushipinjm', 'tudou', 
    '<p class="lxtx-video"><iframe src="iframe 代码中的 src" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" ); 
    function bolo_QTnextpage_arg1() {
    }
    </script>
    <?php
}

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

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

另附上插入去广告视频的方法：