莫著急... 美好的東西往往來的都比較慢!

23 Aug, 2016

FitVids.JS —— 讓視頻響應屏幕尺寸變化

在制作快速響應式網站時, 文字、圖片等元素都可以很容易的響應屏幕尺寸的變化,唯獨視頻比較麻煩。比如通過embed方式加載優酷、土豆甚至YouTube視頻時,使用max- width:100%的方式不能保證視頻在任何設備上都能跟隨屏幕尺寸縮放,這時可以借助js腳本來實現,這就是今天要介紹的FitVids.JS

 

訪問http://fitvidsjs.com/下載最新的FitVids腳本jquery.fitvids.js,將該腳本集成到WordPress中。

步驟概述

  • wp_enqueue_script方式集成腳本并添加初始化代碼

  • 修改oembed產生的embed代碼結構,適應腳本需求

實際效果,可以用Android手機訪問我的另一個博客http://www.chongwuzhu.com,打開任意一篇帶有視頻的文章,就可看到視頻被自動縮放的效果。

FitVids.JS —— 讓視頻響應屏幕尺寸變化
使用Android手機查看視頻的效果

集成FitVids腳本到WordPress

將該腳本放在主題目錄的js文件夾下,并在functions.php中加入如下腳本

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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();

            });

        <?php

    

    }

}

add_action('wp_enqueue_scripts', 'add_fitvids');

這段代碼將FitVids腳本添加到WordPress站點的標簽中,并運行一段初始化代碼。

注意到代碼中jQuery查找的元素是.video這個class,所以需要給embed代碼外面加上一個wrapper,比如加上

1

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

修改embed輸出代碼

針對YouTube或Vimeo等支持oembed的視頻源,將下面的代碼添加到functions.php中

1

2

3

4

5

function add_embed_filter( $html ) {

    $return = '

'

. $html . '


';

    return $return;

}

add_filter('oembed_dataparse', 'add_embed_filter');

若是針對youku、土豆和56.com,注意如果你安裝了中文版的WordPress,就支持自動embed這些網站的視頻,只需要添加下面的代碼,就可以修改結構

1

2

3

4

5

6

7

function add_oembed_filter( $html ) {

    $return = '

'

. $html . '


';

    return $return;

}

add_filter('embed_youku', 'add_oembed_filter');

add_filter('embed_56com', 'add_oembed_filter');

add_filter('embed_tudou', 'add_oembed_filter');

完成這些,通過oembed方式加載的站外視頻就可以自動響應屏幕尺寸的變化了,不用擔心完美的Responsive主題被一個橫跨出去的視頻破了相。

  • 上一篇:使用CSS3 Flexbox布局
  • 下一篇:jquery mobiscroll3.0 滑動、滾動 -select-時間選擇美化插件
  • 029-68787028,4000-613-001 & [email protected]

    西安市高新區灃惠南路與科技七路交匯處西南角, 西水·水岸陽光1號樓1-604號

    重庆时时彩是正规的吗?