某小健博客
当前位置: WordPress > WordPress教程 > WordPress网站插入视频自适应的方法

WordPress网站插入视频自适应的方法

2018-03-24 分类:WordPress教程 作者:某小健 阅读(162)

有的时候写文章需要在文章中插入视频或者就是单独的发布视频,但是会发现并不是自适应的,要不就是太大,要不就是太小,可能还会撑破主题。

也许可以设置它的宽高,但是到了手机端就不适合了。今天分享一下WordPress网站视频自适应的方法。

在文章中插入视频时的代码:

  1. <div style="text-align:center;">
  2. <iframe id="shipin" style="width:96%" height=498 width=510 src="这里放视频链接" frameborder=0 allowfullscreen></iframe>
  3. </div>

我们需要在网页模板中增加一段js代码。这个动作也可以在网页加载的最开始做。对于WordPress网站,这段代码可以增加到header.php或者footer.php的合适位置,代码如下:

  1. <script>
  2. vd = document.getElementById("shipin");
  3. if (vd != null) {
  4.     vd.style.height = vd.scrollWidth*0.8+"px";
  5. }
  6. </script>

这段代码的意思很简单,就是找到id为shipin的元素,让后将其高设置为宽的80%。
这样就实现了视频自动版网页的自适应。

内容扩展

如果经常要在文章中插入视频,或者用不是视频主题的主题做视频网站,这样就经常要用到视频插入代码,代码比较多,很难记住。每次都要输入或者从外面复制粘贴,感觉很麻烦。这里说一下,把这段代码弄成文章编辑按钮的形式,只要点击一个按钮,代码自动出来。只要把视频链接加入就可以了。不用每次都重新输入视频代码。也许还有更好的方法,但是博主不懂代码,所以只能用这么粗糙的方法了。

把以下代码添加到主题目录的function.php里面就可以了:

  1. add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
  2. function bolo_after_wp_tiny_mce($mce_settings) {
  3. ?>
  4. <script type="text/javascript">
  5. QTags.addButton( 'v_video', '添加视频', '<div style="text-align:center;"><iframe id="shipin" style="width:100%" height=500 width=100% src="" frameborder=0 allowfullscreen></iframe></div>\n', "" );
  6. </script>
  7. <?php
  8. }

WordPress网站视频自适应的方法

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

支付宝
微信
0

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - WordPress网站插入视频自适应的方法

    博客简介

    服务热线:
     

     QQ在线交流

     旺旺在线