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

WordPress 1年前 (2017-10-02) 138次浏览 已收录 0个评论

我们在使用 wordrpess 主题时,无论是在自定义上传视频中、还是在转发类似爱奇艺或是优酷之类的视频网站视频是都会出现一个视频自适应的问题。那今天大挖给大家提供一个终极的解决方案。而且适用于各种主题只需要了解简单的 html 操作基础就可以上手。

原理说明

简单的原理,即是为视频链接或是分享过来的视频 url 手工添加一个样式,样式本身就是自适应的框架而成。那我们原做的是两步,第一在 css 里面添加一组样式表,第二为了我们在发布文章里使用方便,会在文本编辑器添加按钮。即可。

首先,需要找到主题 style.css 添加以下 css 代码:

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

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

<iframe src="地址链接" width="510" height="498" frameborder="0" allowfullscreen="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="lxtx-video"><iframe src="视频地址" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );  
    
    </script>
    <?php 
}

好了,一套完美的 WordPress 主题视频自适应代码解决方案就完成了。是不是很方便,完成后台生成,操作简单,而且完美支持各种视频平台以及自主上传的视频。


本文版权归湖南 SEO所有丨如需转载请注明文章出处
原文地址:https://www.wangxiaoyou.com/2515.html
喜欢 (0)
[736035566@qq.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址