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

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

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

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

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

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

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

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

www.aquamiho.jp

https://www.aquamiho.jp/

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

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

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

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

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

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

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

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

【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非！

「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する

「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

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テーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能他、機能多数。

custom.cssに加えるcss

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

video {
	max-width: none;
}

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

「Arkhe」の詳細を見る
「Arkhe Pro Pack」（サブスク版）を購入する

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とスマホで別々に画像を設定できるようになります。

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

参考にしてください。