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

2016-05-18 23:01 2,097 38 条评论 龙笑天下
Dragon主题购买

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

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

记得我当初也发现了这样的问题,通过视频网站分享的视频代码(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 视频自适应宽高度及为后台编辑器添加自定义按钮


/**
 * 使插入的 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”的方法!

「点点赞赏,手留余香」

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

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

2016-05-16

2016-05-21

发表评论

表情 格式 贴图 链接 私密 签到
Dragon主题购买阿里云特价云服务器1核2G低至86元,N4共享型服务器3年仅需799元腾讯云特价云服务器1核2G 88元/年 2核4G3M688元/3年,更有千元代金券礼包免费领!
评论
正在努力加载中...
扫一扫二维码分享
×
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. Learn more