最近经常有网友询问，我的视频是怎样做到自适应宽高度的？在此龙笑天下就来说下具体的实现方法，及给后台文章文本编辑器添加按钮的方法技巧！
记得我当初也发现了这样的问题，通过视频网站分享的视频代码（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="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> |
方法扩展：给后台文章文本编辑器添加按钮的方法
如果我们贴视频，每次都填写这么多代码的话，那不就既枯燥又麻烦死！那么怎么解决呢？
我们可以通过在后台文本编辑器上面加上一些按钮的方法来避免这种重复的输入，因为视频网站提供的视频引用代码都是有共同性的！
好了，直接给出比较全的代码吧，在functions.php中加入以下代码，就可以在后台文本编辑器上面加上下面这些短代码了：
/** * 使插入的FLASH视频自适应长宽及为后台编辑器添加自定义按钮 * http://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="http://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', "" ); </script> <?php } |
友情提示：其它视频网站根据各自视频网站提供的引用方式代码可自行增添修改吧！不仅是以上这些按钮，还可以加入一些其它的功能按钮哦！
代码解析：
四对引号，分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容（最后一对引号为空则一次输入全部内容），\n表示换行；
形象说明：QTags.addButton( ' 按钮ID', '按钮显示名', '点一下输入内容', '点一下关闭内容' );
可以自定义添加多行QTags.addButton( '', '', '', '' );增加多个按钮！
原文：http://www.ilxtx.com/how-to-insert-adaptive-video.html
来源：
https://www.wpdaxue.com/flash-iframe.html
