WordPress文章视频实现响应式

在制作快速响应式网站时，文字、图片等元素都可以很容易的响应屏幕尺寸的变化，唯独视频比较麻烦。比如通过embed方式加载优酷、土豆甚至 YouTube视频时，使用max-width:100%的方式不能保证视频在任何设备上都能跟随屏幕尺寸缩放，这时可以借助js脚本来实现，这就是今天 要介绍的FitVids.JS。

访问 http://fitvidsjs.com/ 下载最新的FitVids脚本jquery.fitvids.js，也可直接下载将该脚本集成到WordPress中。

第一步、集成FitVids脚本到WordPress

将该脚本放在主题目录的js文件夹下，并在functions.php中加入如下脚本

/**
    *WordPress 文章视频响应式支持
*/
function add_fitvids() {
    wp_register_script('jquery_fitvids', get_template_directory_uri(). '/js/jquery.fitvids.js', array('jquery'), '2.0.110526' );
    wp_enqueue_script('jquery_fitvids');
    add_action('wp_head', 'add_fitthem');

    function add_fitthem() { ?>
        <script type="text/javascript">
            jQuery(document).ready( function() {
                jQuery('.video').fitVids();
            });
        </script><?php

    }
}
add_action('wp_enqueue_scripts', 'add_fitvids');

这段代码将FitVids脚本添加到WordPress站点的<head>标签中，并运行一段初始化代码。

注意到代码中jQuery查找的元素是.video这个class，所以需要给embed代码外面加上一个wrapper，比如加上

<div class="video"><embed>...</embed></div>

第二步、修改embed输出代码

针对YouTube或Vimeo等支持oembed的视频源，将下面的代码添加到functions.php中

function add_embed_filter( $html ) {
    $return = '<div class="video">' . $html . '</div>';
    return $return;
}
add_filter('oembed_dataparse', 'add_embed_filter');

若是针对youku、土豆和56.com，注意如果你安装了中文版的WordPress，就支持自动embed这些网站的视频，只需要添加下面的代码，就可以修改结构

function add_oembed_filter( $html ) {
    $return = '<div class="video">' . $html . '</div>';
    return $return;
}
add_filter('embed_youku', 'add_oembed_filter');
add_filter('embed_56com', 'add_oembed_filter');
add_filter('embed_tudou', 'add_oembed_filter');

完成这些，通过oembed方式加载的站外视频就可以自动响应屏幕尺寸的变化了，不用担心完美的主题被一个横跨出去的视频破了相。

PS:悲剧的是不支持iOS系统。

发表评论

游客欢迎您