jQueryプラグイン「Vegas」のフル画面動画設定について

モニター全面のスライドショーを実現する際に便利なjQueryプラグインが「Vegas」です。

このプラグインはポピュラーなもので、設置の仕方などはちょっとググれば出てきます。
ですので「Vegas」の使い方は、このページでは割愛します。

「Vegas」は私も仕事でよく使うプラグインでした。

最近ではjQueryで稼働するスライダーはあまり使っていません。

JavaScriptのみで稼働するスライダー「Swiper」の使用頻度が高くなったからです。

しかし、「Vegas」は派手に動くので、けっこう好きです。

以下のサイトでも「Vegas」を使っていました。

www.aquamiho.jp

株式会社アクア美保｜リフォーム

トイレ、キッチン、お風呂などの水回りのリフォームで高い実績を持つ株式会社アクア美保。岡山県笠岡市、倉敷市、広島県福山市を中心に活動中。無...

いつも同じスライダーを使用するのに飽きたら、「Vegas」を使ってみるとよいでしょう。

「Vegas」がよいのはレスポンシブデザインでPCとスマホで画像を切り替えたりするのも簡単にできるところです。

これについては最後に解説します。

WordPressテーマTCDの「UNIQUE」にも使ってあったので、たまたま弊社サイトで動画を配置したところ、不良があることが分かりました。

画像のスライドショーしかやったことが無い場合は気づかないでしょう。

不良と言ってもWindowsのみ横より縦の方が長いブラウザサイズになったときに起こるものなので、実害はあまりないかもしれません。

縦長の画面サイズになったとき動画が全画面になりません。上下に空きが出てしまいます。

この現象も対策してみました。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

1 「Vegas」の動画配置をフルレスポンシブにする
2 custom.cssに加えるcss
3 vegas_c.jsのスクリプト
4 「Vegas」をレスポンシブWEBデザインに適応させる

「Vegas」の動画配置をフルレスポンシブにする

では、WordPressテーマTCDの「UNIQUE」を例にみていきましょう。

「UNIQUE」のhead.phpのカスタマイズによって、cssとJavaScriptを読み込みます。

head.phpの追加箇所は以下の「<!– 追加　start –>」から「<!– 追加　end –>」までです。

（前半略）
jQuery(document).ready(function($){

  $('[data-cat-filter]').click(function(){
    if ($(this).hasClass('active')) return false;
    $('.active[data-cat-filter]').removeClass('active');
    $(this).addClass('active');

    var c = $(this).attr('data-cat-filter');
    if (c.indexOf('cat-') == -1) c = '';
    post_list_cat_filtered = c;

    if (c) {
      $('#archive_work_list .box').removeClass('active').css({opacity:0, display:'none'});
      $('#archive_work_list .box.'+c).css({display:'block'})
      $('#archive_work_list .box.'+c).each(function(i){
        $(this).delay(i*150).queue(function(){
          $(this).addClass('active').dequeue();
        });
      });
    } else {
      $('#archive_work_list .box').removeClass('active').css({opacity:0, display:'block'});
      $('#archive_work_list .box').each(function(i){
        $(this).delay(i*150).queue(function(){
          $(this).addClass('active').dequeue();
        });
      });
    }

    return false;
  });

});

</script>
<?php }; ?>
<!-- 追加　start -->
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/custom.css?ver=<?php echo version_num(); ?>">
<?php if ( !wp_is_mobile() && is_front_page() ) : ?>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/vegas_c.js?ver=<?php echo version_num(); ?>"></script>
<?php endif; ?>
<!-- 追加　end -->
<?php
     }; // END function tcd_head()
     add_action("wp_head", "tcd_head2");
?>

まず、子テーマの「custom.css」を読み込みます。

「Vegas」の動画用のスクリプトは「vegas_c.js」として読み込みます。

if ( !wp_is_mobile() && is_front_page() ) :で「モバイルでなく」かつ「トップページの場合」に処理します。

スマホでは動画は動きませんし動画はトップページのみなので、判定を加えて限定的に読み込んでいます。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定（絵文字読み込み・コード最適化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

custom.cssに加えるcss

「Vegas」のcssで要素「vegas-videoクラス」にmax-width100%が設定されています。
そこで、video要素のmax-widthを初期値に戻します。

video {
	max-width: none;
}

※以下で説明するJavaScript（vegas_c.js）でcssを設定しても良さそうなのですが、なぜか上手くいきませんでした。

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

vegas_c.jsのスクリプト

以下のスクリプトは動画配置では一般的なものです。

「Vegas」が加えた要素に対してスクリプトを実装します。

jQuery(document).ready(function($){
	
	var movtimer = false;
	
	//メインコンテンツ部分の配置
	var movieRatio = 16/9; // 動画の縦横比 
		
	var movUehosei = 4; // ウインドウズで枠が出るため少し大きくする
		
	function movieAdjust(){
    var adjustWidth = $(".vegas-container").width();
		var adjustHeight = $(".vegas-container").height();
           
		if (adjustHeight > adjustWidth / movieRatio) {
			adjustWidth = adjustHeight * movieRatio;
			adjustWidth = adjustWidth + movUehosei;
    }
		$('video').css({width:(adjustWidth)+"px",height:parseInt((adjustWidth/movieRatio))+"px"});
		$('video').css({'margin-left':-(($('video').width()-$(window).width())/2)}); 
		$('video').css({'margin-top':-(($('video').height()-($(".vegas-container").height()))/2)});
  }	
	$(".vegas-container").css("height",$(window).height()+"px");
	$(".vegas-container").css("width",$(window).width()+"px");
		
	movieAdjust();
        
	$(window).resize(function() {
	    if (movtimer !== false) {
         clearTimeout(movtimer);
      }
		movtimer = setTimeout(function() {
			$(".vegas-container").css("height",$(window).height()+"px");
			$(".vegas-container").css("width",$(window).width()+"px");
			
			movieAdjust();
		}, 200);
	});
		
});

vegas-containerが「Vegas」の画面要素です。
私はこのスクリプトを汎用的に使用しているので、まずvegas-containerに画面の幅と高さを設定して処理しています。

以上でWindowsのブラウザ画面が縦長になった場合も動画が全画面で配置されるようになります。

加えて全画面処理がレスポンシブに対応するようになります。

このスクリプトはWordPressテーマTCDを使うときだけでなく、「Vegas」と動画を組み合わせる場合には追加しておくべきでしょう。

「Vegas」をレスポンシブWEBデザインに適応させる

最後に「Vegas」をレスポンシブWEBデザインで採用する場合の設定を記載しておきます。

var ww = window.innerWidth || document.documentElement.clientWidth || 0;
if (ww > 767){
			var srcBgArray = [{ src: 'images/img01.jpg' }, //PCでスライドする画像を配列で設定
    				 { src: 'images/img02.jpg' },
					 { src: 'images/img03.jpg' }];
} else {
			var srcBgArray = [{ src: 'images/simg01.jpg' }, //スマホでスライドする画像を配列で設定
    				 { src: 'images/simg02.jpg' },
					 { src: 'images/simg03.jpg' }];
			
}
$('#image').vegas({ 
			slides: srcBgArray,
			delay: 5000, 
			timer: false,
			animation: 'random', 
			transition: 'blur', 
			transitionDuration: 1000 
});

以上の様に画面の幅を判定してスライドの配列を変えればPCとスマホで別々に画像を設定できるようになります。

クライアントからスマホの画像をもう少し左寄せにしたいというような要望が出てきた場合はこの方法で対応します。

参考にしてください。