wordpress视频无法自适应代码调整方案

无论是自定义上传的视频还是优酷等视频网站的视频，都存在视频自适应的问题。今天，给大家提供终极解决方案，适用于各种主题。

所以需要两步操作：

1. 在css中添加了一组样式表。
2. 为了便于发表文章，在文本编辑器中添加按钮。

一、找到主题style.css添加以下css代码：

/*jioluo.com角落的站——视频自适应代码*/
.wa-video {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
/*jioluo.com角落的站——视频自适应代码*/
.wa-video iframe,.wa-video object,.wa-video embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

后台发布视频时，以iframe方式引用视频网站的视频。

PS：iframe方式在pc端和移动端都能完美显示视频。

在文本模式编辑器里用下面的类似方法引用：

<iframe height=498 width=510 src="地址链接" frameborder=0 allowfullscreen></iframe>

二、为后台文章发布文本编辑器添加按钮

向编辑器添加按钮降低用户操作成本。如果每次上传或粘贴视频链接时都要复制代码，操作步骤会太复杂，所以我们使用简单的代码来简化操作。

将以下代码添加到functions.php，即可在在后台文本编辑器上面加上这些短代码：

// 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 
}