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

モニター全面のスライドショーを実現する際に便利なjQueryプラグインが「Vegas」です。
このプラグインはポピュラーなものなので設置の仕方などはちょっとググれば出てきますので、このページでは割愛します。

vegasは私も仕事でよく使うプラグインです。
よいのはレスポンシブデザインでPCとスマホで画像を切り替えたりするのも簡単にできるところでしょう。
これについては最後に解説します。

WordPressテーマTCDの「UNIQUE」にも使ってあったので、たまたま当方のサイトで動画を配置したところ、不良があることが分かりました。
今まで画像のスライドショーしかやったことがなかったので気づきませんでした。
不良と言ってもWindowsのみ横より縦の方が長いブラウザサイズになったときに起こるものなので、実害はあまりないかもしれません。
縦長の画面サイズになったとき動画が全画面になりません。上下に空きが出てしまいます。

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

スポンサーリンク

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

前回の記事で解説したhead.phpのカスタマイズによって、cssとJavaScriptを読み込みます。

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

まず、子テーマのcustom.cssを読み込みます。
vegasの動画用のスクリプトはvegas_c.jsとして読み込みます。
スマホでは動画は動きませんし動画はトップページのみなので、判定を加えて限定的に読み込んでいます。

custom.cssに加えるcss

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

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

vegas_c.jsのスクリプト

以下のスクリプトは動画配置では一般的なものです。
要はvegasが加えた要素に対してスクリプトを実装します。

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

以上でWindowsのブラウザ画面が縦長になった場合も動画が全画面で配置されるようになります。
加えて全画面処理がレスポンシブに対応するようになります。
このスクリプトはWordPressテーマTCDを使うときだけでなく、vegasと動画を組み合わせる場合には追加しておくべきでしょう。

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

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

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

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

by T.Y.

スポンサーリンク

関連記事

  1. jQueryプラグイン「Slider Pro」スライド領域の高さをフル…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

制作実績一覧

おすすめ記事

最近の記事

– このブログを書いてる人 –

 

 

山本 朝次/Yamamoto Tomotsugu

 

クリエイティブディレクター

 

はじめまして。よろしくおねがいします。

 

柴犬が大好きです。

 

プロフィールはFacebookで。

 

Facebook

 
 
 

PAGE TOP