videoタグで設置した画面いっぱいの動画ですが、画面サイズを変更すると、横縦比が変動して動画が画面中央に設置されなかったので、以下の方法で対応してみました。
そのまえに…基礎的なvideoの属性メモ
| 属性 | 値 | 効果 |
|---|---|---|
| src="" | (URL) | ファイルのURL |
| height="" | 数値 | 要素の高さ |
| width="" | 数値 | 要素の幅 |
| autoplay="" | autoplay | 自動的に再生を行います。 |
| controls="" | controls | 動画再生をコントロールするUIを表示します。 |
| loop="" | loop | 動画を繰り返し再生します。 |
| preload="" | auto none metadata |
動画ファイルを読み込みはじめるタイミングを設定します。preloadが指定されていてもautoplayが入っている場合、autoplayが優先されます。 auto: 事前に読み込む/事前に読み込んでも良い none: 事前に読み込まない metadata: メタデータだけ読み込む |
| poster="" | (URL) | ブラウザが指定したファイルを再生できない環境の場合、代替する画像を指定できます。 |
| muted | muted | 動画に音声がついている場合、音を出さない設定にできます。 |
| mediagroup="" | 任意の文字列 | audioとvideoなどを同期できます。同じ値を入力することで、同じグループとして指定し、再生を同期することができます。 |
| crossorigin="" | 外部からの直リンクを防ぐことができます。デフォルト値（初期設定）の場合は、受信元のドメイン設定をしなくても読み込みは可能ですが` use-credintials"を設定することで、SSLやHTTP認証などを使った安全な読み込みを指定できるようになります。 |
実際のhtml/css/jQueryの記述
<div class="wrapper">
<video id="video" poster="movie_bg.jpg" muted autoplay loop>
<source src="/movie.mp4" type="video/mp4">
<source src="/movie.webm" type="video/webm">
<p>video要素がサポートされていないブラウザでご覧になっています。</p>
</video>
</div>
CSSで画面いっぱいに動画を設置するように以下のように記述します。
.wrapper {
height: 100%; // 高さを画面いっぱいに指定する。(vhが効かない場合の対策)
height: 100vh; // 高さを画面いっぱいに指定する。
position: relative; //横幅がウィンドウズサイズの縦幅よりもはみ出てしまう場合に、左にずらすために指定。
width: 100%; // 横幅もいっぱいに。
}
#video {
background: url('/video_bg.jpg') no-repeat; // 動画が再生を始めるまで、cssのほうでも背景を設定します。
background-attachment: fixed; // 中央揃えになるように、fixed。
background-position: center center; // positionも中央に。
background-size: cover; // 画面サイズに応じてサイズを可変するように設定。
left: 0;
// 以下、画面いっぱいにするためのCSS設定
min-height: 100%;
min-height: 100vh;
min-width: 100%;
min-width: 100vw;
// wrapperのサイズに応じて、leftの位置をjQueryで指定するため、positionはabsoluteにします。
position: absolute;
top: 0;
// z-indexは調整してください。
z-index: 1;
}
上記のままだと、画面の高さにメディアの高さが合ってしまうことで、メディアの横幅が画面サイズよりも大きくなり、leftの位置を調整しないと中央に寄らなくなってしまいます。
$(function() {
var getWindowMovieHeight = function() {
// ここでブラウザの縦横のサイズを取得します。
var windowSizeHeight = $(window).outerHeight();
var windowSizeWidth = $(window).outerWidth();
// メディアの縦横比に合わせて数値は変更して下さい。(メディアのサイズが width < heightの場合で書いています。逆の場合は演算子を逆にしてください。)
var windowMovieSizeWidth = windowSizeHeight * 1.76388889;
var windowMovieSizeHeight = windowSizeWidth / 1.76388889;
var windowMovieSizeWidthLeftMargin = (windowMovieSizeWidth - windowSizeWidth) / 2;
if (windowMovieSizeHeight < windowSizeHeight) {
// 横幅のほうが大きくなってしまう場合にだけ反応するようにしています。
$("#video").css({left: -windowMovieSizeWidthLeftMargin});
}
};
// 以下画面の可変にも対応できるように。
$(window).on('load', function(){
getWindowMovieHeight();
});
$(window).on('resize', function(){
getWindowMovieHeight();
});
});
縦横の現在のサイズを把握して、画面に合わせて leftを指定していくことによって、画面の可変にも耐えられるようになりました。