让 WordPress 自动生成支持自适应的优酷视频代码

　　只需要在文章中单独一行放上优酷的播放页地址，WordPress 就可以自动插入优酷视频播放器，非常方便。但是自动插入的是 Flash 播放器，并非 HTML5 播放器，且不支持自适应。接下来小练告诉大家怎样让 WordPress 自动生成支持自适应的优酷视频代码。

　　下面将以小练执导的音乐微电影《One More Chance》这个视频为例，优酷播放地址为：http://v.youku.com/v_show/id_XNzIzNjEzOTI4.html 。

　　为了更好地兼容移动端，插入的播放器应当是 HTML5 播放器，其实优酷提供了以下通用播放代码：

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

　　以上代码最大的问题在于不支持自适应，目前很多同学使用的 WordPress 主题都是支持自适应的，而且这也是一种趋势，可以确保在不同的终端都可以得到最优秀的浏览体验。

　　接下来我们对以上代码进行小修改，首先将 width 的值改成 100% ，这样一来宽度就会根据内容所在容器的宽度自动调整。然后是高度 height 值的设定，相信不少同学都试过将 height 值改成 100% 之后，播放器高度维持在 150px 的问题。显然高度的自适应有一定难度。

　　其实高度的自适应也不是没有办法实现，不过小练在尝试过很多方法之后果断放弃了，因为我们仅仅是为了插入一个视频，只要能够较好地显示就可以了。于是小练想到了为视频播放器的 height 设定一个固定的值。看见小练的内容主体宽度在普通电脑下为 700px ，将视频播放器的高度固定设置为 400px 的时候，视频播放器比例正常，可以接受。

　　当在手机端打开网页时，发现播放器宽度没有任何问题，但是高度惊人，占据了大半个屏幕，虽然视频可以正常播放，但是实在不美观。所以应当增加一个判定，当手机端访问时，固定将播放器宽度设置为一个较小的值，看见小练目前设置的值是 250px 。

　　结合了网上搜索的一些代码和自己的需要之后，最终得出以下代码，只需将以下代码添加到主题文件的 functions.php 中，即可实现自动生成支持自适应的优酷视频代码的功能。

// 增加优酷视频支持 by wavelpc.
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' );

　　特别提示： functions.php 文件是主题核心文件，请谨慎修改。详见编辑 WordPress 主题 functions.php 文件时的注意事项。

　　其中 wp_embed_unregister_handler('youku'); 是注册 WordPress 原有的支持代码，wp_is_mobile() 是 WordPress 内置的判定是否为手机浏览的函数，至于 250 和 400 ，大家可以根据自己的需要进行修改。以上这段代码所实现的功能非常简单，大家也可以根据自己的需要对以上代码进行修改。

　　以下是小练现在使用的优酷视频支持代码，在视频播放器下方增加了一行提示，这样浏览者可以在无法播放或者比例失常的时候打开优酷播放页面进行观看：

// 增加优酷视频支持 by wavelpc.
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><br /><span style="display: block; text-align: center; color: #ccc;">（如果无法观看或比例失常，可以 <a href="http://v.youku.com/v_show/id_'. esc_attr($matches[1]) .'.html" target="_blank">点击这里</a> 跳转到优酷播放页面）</span>';
	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' );

　　让我们来看看最终的效果：

　　最后，如果需要插入土豆的视频代码的话，可以看这篇文章：让 WordPress 自动生成支持自适应的土豆视频代码

迷失的人迷失了，相逢的人会再相逢。

让 WordPress 自动生成支持自适应的优酷视频代码

取消