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

一、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 综合 标签:    


下一篇:

没有了,已经是最新文章