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系统。

 

 

发表评论