搬码资源网广告位 搬码资源网广告位

WordPress视频自适应代码调整

下面是搬码源码网 abnma.com 通过网络收集整理的代码片段。搬码源码网小编现在分享给大家,也给大家做个参考。

我们在使用 wordpress 主题时,无论是在自定义上传视频中、还是在转发类似爱奇艺或是优酷之类的视频网站视频是都会出现一个视频自适应的问题。那今天给大家提供一个终极的解决方案。而且适用于各种主题只需要了解简单的 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 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

}

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

以上是搬码源码网(abnma.com)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得搬码源码网网站内容还不错,欢迎将搬码源码网网站推荐给程序员好友。

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11153.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?