[置顶]WordPress文章插入自适应宽高度FLASH视频

鲜果博客

一、当前主题样式文件style.css中添加以下代码;

.lxtx-video {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}
.lxtx-video iframe,.lxtx-video object,.lxtx-video embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

那么我们要在文章中插入自适应视频的话,在文本编辑器中要插入以下代码就 ok 了:

  1. <p class="lxtx-video"><iframe src="https://player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>    
方法扩展:给后台文章文本编辑器添加按钮的方法

如果我们贴视频,每次都填写这么多代码的话,那不就既枯燥又麻烦死!那么怎么解决呢?

我们可以通过在后台文本编辑器上面加上一些按钮的方法来避免这种重复的输入,因为视频网站提供的视频引用代码都是有共同性的!
在当前主题函数文件functions.php添加以下代码;

  1. /** 
  2.  * 使插入的FLASH视频自适应长宽及为后台编辑器添加自定义按钮 
  3.  * http://www.ilxtx.com/how-to-insert-adaptive-video.html 
  4.  */  
  5. // wordpress后台HTML编辑器添加自定义快捷标签按钮  
  6.  add_action('after_wp_tiny_mce', 'lxtx_bolo_after_wp_tiny_mce');  
  7.  function lxtx_bolo_after_wp_tiny_mce($mce_settings) {  
  8.     ?>  
  9.     <script type="text/javascript">  
  10.     QTags.addButton( 'youkushipinjm', 'youku',  
  11.     '<p class="lxtx-video"><iframe src="http://player.youku.com/embed/视频特征ID" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );  
  12.     QTags.addButton( 'acfunshipinjm', 'AcFun',  
  13.     '<p class="lxtx-video"><iframe src="http://cdn.aixifan.com/player/ACFlashPlayer.out.swf?type=page&url=http://www.acfun.tv/v/视频特征ID" id="ACFlashPlayer-re" frameborder="0"></iframe></p>\n', "" );  
  14.     QTags.addButton( 'qqshipinjm', 'QQ',  
  15.     '<p class="lxtx-video"><iframe frameborder="0" src="通用代码中的src地址" allowfullscreen></iframe></p>\n', "" );  
  16.     QTags.addButton( 'iqiyishipinjm', '爱奇艺',  
  17.     '<p class="lxtx-video"><iframe src="通用代码中的src" frameborder="0" allowfullscreen="true"></iframe></p>\n', "" );  
  18.     QTags.addButton( 'yinyuetaishipinjm', '音悦台',  
  19.     '<p class="lxtx-video"><embed src="代码中的src" quality="high" align="middle"  allowScriptAccess="sameDomain" allowfullscreen="true" type="application/x-shockwave-flash"></embed></p>\n', "" );  
  20.     QTags.addButton( 'souhushipinjm', '搜狐',  
  21.     '<p class="lxtx-video"><iframe src="通用代码中的src" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );  
  22.     QTags.addButton( '56shipinjm', '56',  
  23.     '<p class="lxtx-video"><iframe src="http://www.56.com/iframe/视频特征ID" frameborder="0" allowfullscreen=""></iframe></p>\n', "" );  
  24.     QTags.addButton( 'tudoushipinjm', 'tudou',  
  25.     '<p class="lxtx-video"><iframe src="iframe代码中的src" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );  
  26.     </script>  
  27.     <?php  
  28. }  
添加后编辑文章时在可视化模式下的工具栏中,最后建议以iframe方式引用视频网站的视频,因为iframe方式在PC端和手机端都能完美显示视频.

关于我 | lixianguo

只是一位喜欢音乐、小说、诗歌、散文的八零后伪程序员。一不小心入了wordpress的坑,从此一发不可收拾!每天以折腾主题代码为乐。

本文来源龙笑天下,经授权后由lixianguo发布,观点不代表鲜果博客的立场,转载请联系原作者。
8
鲜果博客

发表评论