摘要：我们在使用wordpress主题时，无论是在自定义上传视频中、还是在转发类似爱奇艺或是优酷之类的视频网站视频是都会出现一…
我们在使用wordpress主题时，无论是在自定义上传视频中、还是在转发类似爱奇艺或是优酷之类的视频网站视频是都会出现一个视频自适应的问题。那今天大挖给大家提供一个终极的解决方案。而且适用于各种主题只需要了解简单的html操作基础就可以上手。
原理说明
简单的原理，即是为视频链接或是分享过来的视频url手工添加一个样式，样式本身就是自适应的框架而成。那我们原做的是两步，第一在css里面添加一组样式表，第二为了我们在发布文章里使用方便，会在文本编辑器添加按钮。即可。
首先，需要找到主题style.css添加以下css代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/*wazhuti.com大挖—-视频自适应代码*/
.wa-video {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
/*wazhuti.com大挖—-视频自适应代码*/
.wa-video iframe,.wa-video object,.wa-video embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
|
然后，后台发布视频时，建议以iframe方式引用视频网站的视频，因为iframe方式在pc端和手机端都能完美显示视频，另外2种方式就不一定了！在中文本模式编辑器里用下面的类似方法引用：
|
1
|
<iframe height=498 width=510 src=”地址链接” frameborder=0 allowfullscreen></iframe>
|
为后台文章发布文本编辑器添加按钮
在编辑器添加按钮是减少用户操作成本，如果我们每次上传或是粘贴视频链接都要去复制代码就会使操作步骤过与繁琐，所以我们用一段简单的代码让操作变的得简单
在functions.php中加入以下代码，就可以在后台文本编辑器上面加上下面这些短代码了：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/**
* [亲测有效]wordpress视频自适应代码调整方案
*/
// 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’, ‘视频’,
‘<p class=”wa-video”><iframe src=”视频地址” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>\n’, “” );
</script>
<?php
}
|
好了，一套完美的wordpress主题视频自适应代码解决方案就完成了。是不是很方便，完成后台生成，操作简单，而且完美支持各种视频平台以及自主上传的视频。
来源：http://www.wazhuti.com/1153.html
