WordPress视频自适应代码调整

2021-05-22 0 1,401 百度已收录

我们在使用wordpress主题时,无论是在自界说上传视频中、照样在转发类似爱奇艺或是优酷之类的视频网站视频是都市泛起一个视频自顺应的问题。那今天给人人提供一个最终的解决方案。而且适用于种种主题只需要领会简朴的html操作基础就可以上手。

原理说明

简朴的原理,即是为视频链接或是分享过来的视频url手工添加一个样式,样式自己就是自顺应的框架而成。那我们原做的是两步,第一在css内里添加一组样式表,第二为了我们在宣布文章里使用利便,会在文本编辑器添加按钮,即可。首先,需要找到主题style.css添加以下css代码:

  1. /*视频自顺应代码*/
  2. .wa-video {
  3.     position:relative;
  4.     padding-bottom:56.25%;
  5.     height:0;
  6.     overflow:hidden;
  7. }
  8. .wa-video iframe,.wa-video object,.wa-video embed {
  9.     position:absolute;
  10.     top:0;
  11.     left:0;
  12.     width:100%;
  13.     height:100%;
  14. }

然后,后台宣布视频时,建议以iframe方式引用视频网站的视频,由于iframe方式在pc端和手机端都能完善显示视频,另外2种方式就纷歧定了!在中文本模式编辑器里用下面的类似方式引用:

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

添加按钮

在编辑器添加按钮是削减用户操作成本,若是我们每次上传或是粘贴视频链接都要去复制代码就会使操作步骤过与繁琐,以是我们用一段简朴的代码让操作变的得简朴,在functions.php中加入以下代码,就可以在后台文本编辑器上面加上下面这些短代码了:

  1. // wordpress后台HTML编辑器添加自界说快捷标签按钮
  2.  add_action('after_wp_tiny_mce', 'lxtx_bolo_after_wp_tiny_mce');
  3.  function lxtx_bolo_after_wp_tiny_mce($mce_settings) {
  4.     ?>
  5.     <script type="text/javascript">    
  6.     QTags.addButton( 'youkushipinjm', '视频', 
  7.     '<p class="wa-video"><iframe src="视频地址" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );  
  8.  
  9.     </script>
  10.     <?php 
  11. }

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 WordPress视频自适应代码调整 https://zhutizhen.com/14450.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章