gravatar头像龙笑天  11个月前 (05-18) 来源:龙笑天下 隐藏边栏 |   22 条评论  811 
文章评分 47 次,平均分 5.0

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

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

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

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

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

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

视频自适应方法

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

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

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

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

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

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

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

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

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

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

代码解析:

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

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

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

除特别注明外,本站所有文章均为龙笑天下原创,转载请注明出处来自http://www.ilxtx.com/how-to-insert-adaptive-video.html

gravatar头像
龙笑天 最后编辑于:2016-12-27
互助分享,互联网本该如此!

发表评论

表情 链接 贴图 私信 格式 签到

最赞评论
  1. gravatar头像
    龙笑天 年费会员 博 主

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

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

    好叼的感觉。

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

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

  1. gravatar头像
    boke112导航 评论达人 LV.1 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 /桂林市

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

    7楼 2016-12-27 16:06
    0 0 回复
  2. gravatar头像
    有趣的网站 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 鹏博士长城宽带

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

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

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

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

    还好我的网站不放视频

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

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

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

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

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

    好叼的感觉。

    沙发 2016-05-19 15:52
    3 0 回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录。
快捷登录后,请完善资料中的电子邮件地址,可及时收到回复邮件通知和用于登录!

切换登录

注册

扫一扫二维码分享