WordPress基础教程

wordpress引入土豆优酷视频真正实现自适应宽高

发布时间:2012-10-07 21:50:57

本文作者:

最近录制了几套易语言大漠制作游戏外挂的视频,发布在了土豆,在引入自己的网站时,由于设置了视频的高度,宽度,在移动端浏览时出现了高度无法自适应,给浏览者带来极大的不舒服,缺乏体验性,百度了半天,调试了半天,大约有两个角度来解决,一个是js,一个是css,最后不得不大声说,伟大的css,使用css控制及方便又不影响加载速度,总之看到网上铺天盖地的文章也不知道谁是原创,更不知道站长测试了没有,总之我只有css的方法成功!强烈推荐css的方法,以下方法来源网络,不知道谁是原创了,无法保留版权。

一、CSS方法
在主题引入的css文件中,干脆直接在style.css文件中引入以下内容:(以下方法来自空气网络)

.rat0-video {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.rat0-video iframe,.rat0-video object,.rat0-video embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
以iframe方式引入视频一般有三种方法,我们要想在移动端支持,我们要采用Html5,及通用方式的引入方法,以土地为例:

<iframe src=”http://www.tudou.com/programs/view/html5embed.action?type=0&code=1Uu2flzzMhw&lcode=&resourceId=0_06_05_99″ allowtransparency=”true” allowfullscreen=”true” allowfullscreenInteractive=”true” scrolling=”no” border=”0″ frameborder=”0″ style=”width:480px;height:400px;”></iframe>
我们把它修改为以下模式:
也就是加入一个class为rat0-video的p标签:

<p class=”rat0-video”><iframe src=”视频网站提供的iframe方式里的src链接” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>
最终引入样式如下:

<p class=”rat0-video”><iframe src=”http://www.tudou.com/programs/view/html5embed.action?type=0&code=1Uu2flzzMhw&lcode=&resourceId=0_06_05_99″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>
二方法扩展:给后台文章文本编辑器添加按钮的方法
建议你阅读:把WP-GeSHi-Highlight代码高亮插件集成到wordpress文本编辑器
在functions.php文件中加入,就可以在后台文本编辑器上面加上下面这些短代码了:

/**
* 使插入的FLASH视频自适应长宽及为后台编辑器添加自定义按钮
* http://www.rat0.com/253.html
*/
// wordpress后台HTML编辑器添加自定义快捷标签按钮
add_action(‘after_wp_tiny_mce’, ‘bolo_after_wp_tiny_mce’);
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type=”text/javascript”>
QTags.addButton( ‘youkushipinjm’, ‘youku’,
‘<p class=”rat0-video”><iframe src=”http://player.youku.com/embed/视频特征ID” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>\n’, “” );
QTags.addButton( ‘acfunshipinjm’, ‘AcFun’,
‘<p class=”rat0-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=”rat0-video”><iframe frameborder=”0″ src=”通用代码中的src地址” allowfullscreen></iframe></p>\n’, “” );
QTags.addButton( ‘iqiyishipinjm’, ‘爱奇艺’,
‘<p class=”rat0-video”><iframe src=”通用代码中的src” frameborder=”0″ allowfullscreen=”true”></iframe></p>\n’, “” );
QTags.addButton( ‘yinyuetaishipinjm’, ‘音悦台’,
‘<p class=”rat0-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=”rat0-video”><iframe src=”通用代码中的src” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>\n’, “” );
QTags.addButton( ’56shipinjm’, ’56’,
‘<p class=”rat0-video”><iframe src=”http://www.56.com/iframe/视频特征ID” frameborder=”0″ allowfullscreen=””></iframe></p>\n’, “” );
QTags.addButton( ‘tudoushipinjm’, ‘tudou’,
‘<p class=”rat0-video”><iframe src=”iframe代码中的src” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>\n’, “” );
function bolo_QTnextpage_arg1() {
}
</script>
<?php
}
三、不负责的一种方法
在网上搜到很多以下版本,测试没有成功,不过可能是自己的某些设置导致,你完全可以试一下:

// 自动生成支持自适应的土豆视频代码
function wavelpc_iframe_handler_tudou( $matches, $attr, $url, $rawattr ) {
if( wp_is_mobile() ){ $height = 250; } else { $height = 400; }
$iframe = ‘<iframe width=”100%” height=”‘. $height .’px” src=”http://www.tudou.com/programs/view/html5embed.action?code=’. esc_attr($matches[1]) .'” frameborder=”0″ allowfullscreen></iframe>’;
return apply_filters( ‘iframe_tudou’, $iframe, $matches, $attr, $url, $ramattr );
}
wp_embed_unregister_handler(‘tudou’);
wp_embed_register_handler( ‘tudou_iframe’, ‘#http://www.tudou.com/programs/view/(.*?)/#i’, ‘wavelpc_iframe_handler_tudou’ );
// 自动生成支持自适应的优酷视频代码.
function wavelpc_iframe_handler_youku( $matches, $attr, $url, $rawattr ) {
if( wp_is_mobile() ){ $height = 250; } else { $height = 400; }
$iframe = ‘<iframe width=”100%” height=”‘. $height .’px” src=”http://player.youku.com/embed/’. esc_attr($matches[1]) .'” frameborder=”0″ allowfullscreen></iframe>’;
return apply_filters( ‘iframe_youku’, $iframe, $matches, $attr, $url, $ramattr );
}
wp_embed_unregister_handler(‘youku’);
wp_embed_register_handler( ‘youku_iframe’, ‘#http://v.youku.com/v_show/id_(.*?).html#i’, ‘wavelpc_iframe_handler_youku’ );
解释:250是移动端高度预设,400是pc端高度预设,自己根据需要改动。

本站所提供的文章资讯、软件资源、素材源码等内容均为作者提供、网友推荐、互联网整理而来(部分报媒/平媒内容转载自网络合作媒体),仅供学习参考,如有侵犯您的版权,请联系我们,本站将在三个工作日内改正。

小兽wordpress凭借多年的wordpress企业主题制作经验,坚持以“为用户而生的wordpress主题”为宗旨,累计为10万多家客户提供品质wordpress建站服务,得到了客户的一致好评。我们一直用心对待每一个客户,我们坚信:“善待客户,将会成为终身客户”。小兽wordpress能坚持多年,是因为我们一直诚信。我们明码标价(wordpress做网站需要多少钱),从不忽悠任何客户,我们的报价宗旨:“拒绝暴利,只保留合理的利润”。如果您有网站建设、网站改版、网站维护等方面的需求,请立即咨询右侧在线客服或拨打咨询热线:18907337671,我们会详细为你一一解答你心中的疑难。

相关文章

为什么选择小兽WordPress

哪怕不计成本的时间投入,也绝不辜负任何一个客户。
成就客户成就自我的同时,把这个世界变得再美好一点。

我们的故事

小兽WordPress是2011年开始接触互联网,在这期间用WordPress搭建了一个博客叫小兽WordPress,专门学习WordPress建站。

我们的使命

我们希望用WordPress这款优秀的建站程序帮助每个人搭建一个属于自己的网站,高效率低成本做好互联网营销。

我们的文化

我们专注于把客户的事情最好并且做对,这意味着我们在做决定时会考虑到结果,最重要的是,我们力求真实。

我们的未来

我们将在不久的未来成为国内最好的WordPress工作室,小兽WordPress希望和每一个客户成为朋友,一起见证这个美好未来。

为什么选择小兽WordPress

告诉我你是谁,为你量身定做建站方案

我们深知不同的人做网站的阶段不一样,有的是新手,有的是老手。
我们清楚不同的人做网站的目的不一样,有的是展示,有的是营销。

选择如何让自己的业务更上一层楼

还没有WordPress网站

还没有WordPress网站

不管你从事什么行业,WordPress都会为你提供一个专业的主题模板。在WordPress市场上有成千上万的免费主题,适合很多中小企业。

查看所有模板
已经有WordPress网站

已经有WordPress网站

小兽WordPress诚邀你一起学习WordPress,愿与各方携手升级改善您的WordPress网站,一起交流网站加速,网站优化等问题。

马上交个朋友
微信联系
chat 扫码联系
模板建站
挑选模板
网站定制
免费诊断
咨询热线
咨询热线

18907337671

返回顶部