• 光明地产进入怡心湖板块,十陵流拍“扶不起”? ——凤凰网房产成都 2019-04-14
  • 【両会】第13期全人代第1回会議、北京で閉幕 2019-04-07
  • 广州市第十五届人大常委会第十四次会议第一次全体会议 2019-04-07
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-04-05
  • 【改革印记——看中国发展】记录“轨道上的京津冀”成长 2019-04-04
  • “日啖荔枝三百颗”:千万别,大量进食会引发低血糖 2019-04-04
  • 戴斌:旅游开发需更多文化自信 2019-03-18
  • 丁苑 谢瑞波:道德认同在道德教育中有特殊作用 2019-03-18
  • 西沙群岛水下考古出新成果 2019-03-01
  • 女性喝什么能排毒 四种蔬菜汁排毒养颜-美食资讯 2019-02-23
  • 阿里云开年Hi购季满返,5折上云!
    织梦dedecms模板制作仿站(含手机)+安全防护教程

    青海快三一定牛:使插入的FLASH视频自适应宽高度及为后台编辑器添加自定义按钮

    Loading
    3
    《LINUX就该这么学》运维人员必学的LINUX系统自学手册

    最近经常有网友询问,我的视频是怎样做到自适应宽高度的?在此龙笑天下就来说下具体的实现方法,及给后台文章文本编辑器添加按钮的方法技巧!

    how-to-insert-adaptive-video

    记得我当初也发现了这样的问题,通过视频网站分享的视频代码(embed、object或iframe方式)贴到文章里发布后,在电脑上看可能会好好的,但是在手机的浏览器上看就会超出屏幕。

    表格还好直接用百分比就可以自适应,但是iframe的宽度属性设置了百分比的话,高度不能自适应屏幕。把高度设置成百分比,就会出现一个长方形的视频,自己试过就知道了。

    网上也有一大堆的解决办法,尝试了很多发现起作用的并没有几个,也没有能让我满意的适用所有网站的方法。

    后来终于找到一篇文章解决了这个问题,原来视频自适应这么简单,只需要一段css代码就ok了……具体效果可点我查看。

    视频自适应方法

    首先,在主题的主css,如style.css中加入以下css代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    .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%;
    }

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

    1
    
    <p class="lxtx-video"><iframe src="视频网站提供的iframe方式里的src链接" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

    以优酷视频为例,如这个视频://v.youku.com/v_show/id_XMTU2MzI4MTE5Ng==.html,用它的通用方式(也就是iframe方式),它提供的代码如下:

    1
    
    <iframe height=498 width=510 src="//player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder=0 allowfullscreen></iframe>

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

    1
    
    <p class="lxtx-video"><iframe src="//player.youku.com/embed/XMTU2MzI4MTE5Ng==" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

    方法扩展:给后台文章文本编辑器添加按钮的方法

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

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

    好了,直接给出比较全的代码吧,在functions.php中加入以下代码,就可以在后台文本编辑器上面加上下面这些短代码了:

    how-to-insert-adaptive-video-2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    
    /**
     * 使插入的FLASH视频自适应长宽及为后台编辑器添加自定义按钮
     * //www.ilxtx.com/how-to-insert-adaptive-video.html
     */
    // 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', 'youku', 
        '<p class="lxtx-video"><iframe src="//player.youku.com/embed/视频特征ID" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );  
        QTags.addButton( 'acfunshipinjm', 'AcFun', 
        '<p class="lxtx-video"><iframe src="//cdn.aixifan.com/player/ACFlashPlayer.out.swf?type=page&url=//www.acfun.tv/v/视频特征ID" id="ACFlashPlayer-re" frameborder="0"></iframe></p>\n', "" );
        QTags.addButton( 'qqshipinjm', 'QQ', 
        '<p class="lxtx-video"><iframe frameborder="0" src="通用代码中的src地址" allowfullscreen></iframe></p>\n', "" );
        QTags.addButton( 'iqiyishipinjm', '爱奇艺',
        '<p class="lxtx-video"><iframe src="通用代码中的src" frameborder="0" allowfullscreen="true"></iframe></p>\n', "" );
        QTags.addButton( 'yinyuetaishipinjm', '音悦台', 
        '<p class="lxtx-video"><embed src="代码中的src" quality="high" align="middle"  allowScriptAccess="sameDomain" allowfullscreen="true" type="application/x-shockwave-flash"></embed></p>\n', "" );
        QTags.addButton( 'souhushipinjm', '搜狐', 
        '<p class="lxtx-video"><iframe src="通用代码中的src" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );
        QTags.addButton( '56shipinjm', '56', 
        '<p class="lxtx-video"><iframe src="//www.56.com/iframe/视频特征ID" frameborder="0" allowfullscreen=""></iframe></p>\n', "" );
        QTags.addButton( 'tudoushipinjm', 'tudou', 
        '<p class="lxtx-video"><iframe src="iframe代码中的src" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" ); 
        </script>
        <?php
    }

    友情提示:其它视频网站根据各自视频网站提供的引用方式代码可自行增添修改吧!不仅是以上这些按钮,还可以加入一些其它的功能按钮哦!

    代码解析:

    1
    
    QTags.addButton( '', '', '', '' );

    四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),\n表示换行;
    形象说明: QTags.addButton( ' 按钮ID', '按钮显示名', '点一下输入内容', '点一下关闭内容' );
    可以自定义添加多行QTags.addButton( '', '', '', '' );增加多个按钮!

    原文://www.ilxtx.com/how-to-insert-adaptive-video.html

    阿里云优惠大全

    关于 龙笑天下

    欢迎访问龙笑天下网 www.ilxtx.com

    精彩推荐

    WordPress 虾米音乐插件 Hermit

    WordPress文章插入视频(优酷、土豆、56、搜狐、爱奇异、腾迅、新浪、PPTV)

    2 条评论

    1. 这个很有用哦,不过现在优酷爱奇艺的广告太多了,一般都不引用了!我是自己下载放到七牛那里

    2. 正需要这个,感谢分享?。?!

    发表评论

  • 光明地产进入怡心湖板块,十陵流拍“扶不起”? ——凤凰网房产成都 2019-04-14
  • 【両会】第13期全人代第1回会議、北京で閉幕 2019-04-07
  • 广州市第十五届人大常委会第十四次会议第一次全体会议 2019-04-07
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-04-05
  • 【改革印记——看中国发展】记录“轨道上的京津冀”成长 2019-04-04
  • “日啖荔枝三百颗”:千万别,大量进食会引发低血糖 2019-04-04
  • 戴斌:旅游开发需更多文化自信 2019-03-18
  • 丁苑 谢瑞波:道德认同在道德教育中有特殊作用 2019-03-18
  • 西沙群岛水下考古出新成果 2019-03-01
  • 女性喝什么能排毒 四种蔬菜汁排毒养颜-美食资讯 2019-02-23