龙笑天龙笑天  2016-05-18 23:01 龙笑天下 隐藏边栏 |   38 条评论  1,774 
文章评分 56 次,平均分 5.0

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

使插入的 FLASH 视频自适应宽高度及为后台编辑器添加自定义按钮 wordpress

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

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

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

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

视频自适应方法

首先,在主题的主 css,如 style.css 中加入以下 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%;
}

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

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

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

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

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

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

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

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

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

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

使插入的 FLASH 视频自适应宽高度及为后台编辑器添加自定义按钮 wordpress


/**
 * 使插入的 FLASH 视频自适应长宽及为后台编辑器添加自定义按钮
 * https://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="https://player.youku.com/embed/视频特征 ID" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>\n', "" );  
    QTags.addButton( 'acfunshipinjm', 'AcFun', 
    '<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', "" );
    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="http://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', "" ); 
    function bolo_QTnextpage_arg1() {
    }
    </script>
    <?php
}

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

代码解析:

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

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

另附上插入去广告视频的方法:

Wordpress 利用优酷视频云插入去广告的优酷视频的方法-BG
Wordpress 利用优酷视频云插入去广告的优酷视频的方法

Wordpress 利用优酷视频云插入去广告的优酷视频的方法

最近有小伙伴问我,网站上的优酷视频是怎么去掉广告和 logo 的?好吧,在此龙笑天下就分享下“Wordpress 里面如何插入去广告的优酷视频、设置视频打点、去掉播放器右下角优酷 logo”的方法!

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

龙笑天
龙笑天 关注:32    粉丝:36 最后编辑于:2016-12-27
互助分享,互联网本该如此!

发表评论

表情 贴图 链接 私密 格式 签到
最赞评论
  1. 龙笑天
    龙笑天 永久会员 博主 来自天朝的朋友 火狐浏览器 Windows 7

    @夏天烤洋芋问的人比较多,需求比较大就贴出来了~~既然写出来了那就干脆写的全点! [酷]

  2. 夏天烤洋芋
    夏天烤洋芋 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 42.0.2311.154 Windows 7 云南省昆明市 电信

    好叼的感觉。

  3. boke112导航
    boke112导航 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows 7 广西南宁市 电信

    平时真的很少分享视频类文章或其他,懒得折腾了

  1. 钓鱼大师
    钓鱼大师 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 64.0.3282.186 Windows 7 广东省东莞市 联通

    这个视频发布后宽高很小,是调整百分比吗?调多还是调少的?

    11楼 2018-04-10 10:08
    0 0 回复
  2. 钓鱼大师
    钓鱼大师 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 64.0.3282.186 Windows 7 山西省阳泉市 联通

    这个分享好用!

    10楼 2018-03-30 23:08
    0 0 回复
  3. BanYuner
    BanYuner 评论达人 LV.2 来自天朝的朋友 谷歌浏览器 61.0.3163.91 Windows 10 湖北省武汉市 电信

    这类视频我一般采用的都是视频官方站点提供的代码

    9楼 2017-09-24 13:56
    0 0 回复
  4. 乐乐
    乐乐 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 59.0.3071.109 Windows 7 江苏省常州市 移动

    默认是 300 * 150 的 再电脑上哪里修改默认宽度高度的呢?

    8楼 2017-09-22 00:06
    0 0 回复
    • 乐乐
      乐乐 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 59.0.3071.109 Windows 7 江苏省常州市 移动

      @乐乐 在哪修改默认宽高呢

      <p class="lxtx-video"><iframe src="https://player.youku.com/embed/XMTMxMDQ2Nzc4MA" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

    • 龙笑天
      龙笑天 永久会员 博主 来自天朝的朋友 火狐浏览器 Windows 7

      @乐乐仔细看看本文哦,本文在引用视频的时候要去掉 iframe 里面的宽度及高度的,实际宽高比是由 CSS 里面的那个百分比数字控制的,宽度是自适应页面宽度的。

  5. boke112导航
    boke112导航 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows XP 广西南宁市 电信

    今天在 WordPress 大学看到这篇文章,不知道现在是否还是有效?如果有效的话,计划于 2016 年 12 月 29 日发布在本站 WordPress 栏目中。

    7楼 2016-12-27 16:06
    0 0 回复
  6. 有趣的网站
    有趣的网站 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 53.0.2785.89 Windows 7 广东省广州市 鹏博士长城宽带

    你的网站用手机打开后点不了

    6楼 2016-10-17 19:08
    0 0 回复
  7. N
    Nada 来自天朝的朋友 火狐浏览器 48.0 Windows 10 北京市 联通

    我想问下后面那个代码反过来是故意的吗……我网站被搞奔溃了。。。 [大哭] [大哭]

    5楼 2016-09-07 04:00
    0 0 回复
  8. 成航先森
    成航先森 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 48.0.2564.116 Windows 7 四川省成都市 联通

    还好我的网站不放视频

    4楼 2016-05-20 21:35
    1 0 回复
  9. 陌小雨博客
    陌小雨博客 来自天朝的朋友 火狐浏览器 44.0 Windows 10 湖北省 联通

    这个支持苹果设备么?结合小雨分享的插入优酷视频自动播放,就棒棒哒了!
    优酷视频自动播放示例

    地板 2016-05-19 22:06
    0 0 回复
  10. boke112导航
    boke112导航 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows 7 广西南宁市 电信

    平时真的很少分享视频类文章或其他,懒得折腾了

    板凳 2016-05-19 21:37
    2 0 回复
  11. 夏天烤洋芋
    夏天烤洋芋 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 42.0.2311.154 Windows 7 云南省昆明市 电信

    好叼的感觉。

    沙发 2016-05-19 15:52
    3 0 回复
扫一扫二维码分享