今回はフルページで動画背景を使う時の細かい設定方法についてです。
スマホとPCはウィンドウの比率がぜんぜん違うので、動画背景を設定する時ちょっと混乱しますよね。
動画背景も画像のようにbackground-sizeのような指定ができれば楽なんですけどね。
特に動画を画面全体でちゃんとセンタリングするのが難しいです。
しかし、jsを上手く利用すれば全く比率が違うウィンドウでもしっかりフルページでセンタリングできるので、その方法について紹介していきます。
[business_backbone]
動画背景を利用する方法
動画は画像のようにcssで背景として設定するようなことはできません。
なので、videoタグで動画を流し、その上にabsoluteなどのpositionを設定してコンテンツを重ねて背景として利用するのです。
absoluteとflexの使い方がわかっていればさほど難しくはないでしょう。
html
<div id="kv">
<video src="/assets/movie/kv.mp4" poster="/assets/images/kv.jpg" muted autoplay loop></video>
<div class="text-wrap">
<h1>テキスト</h1>
</div>
</div>SCSS
#kv {
position: relative;
overflow: hidden;
video {
position: relative;
min-width: 100%;
min-height: 100%;
}
.text-wrap {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
}ウィンドウいっぱいに動画を設定する
画面いっぱいに動画を表示させるとなると幅と高さを100%に設定することが想像できると思います。
しかし、スマホとpcではウィンドウの比率が全然違うというのころが問題になってくるのですよね。
スマホは縦長だし、pcは横長。
そこでポイントになってくるのが、min-widthとmin-heightを100%に設定することです。
位置をウィンドウサイズに対して最小値を100パーセントにすると、どんなサイズでも画面いっぱいに動画を設定してくれづのです。
上下左右でセンタリングさせる
動画がウィンドウサイズを超えていないなければ、cssだけで真ん中に持ってくることができるのですが、問題はウィンドウの幅を超えていた場合です。
要素の基準値をウィンドウの位置にしなければいけないので、ウィンドウからはみ出した文を設定することができません。
そこでjsで位置を調整する必要が出てきます。
画面の幅と動画の幅を比較して、画面の幅を超えている数の半分をleftのネガティブマージンを設定することでセンタリングすることができるのです。
上下の設定も同じように行います。
jqueryを利用していますが、まとめて関数にするとこのような記述となります。
function set_kv() {
$(function () {
var w = $(window).width();
var h = $(window).height();
//画面いっぱいに設定
$('#kv').css(
{
'height': h,
'width': w,
}
);
//動画の位置調整
var left = 0;
var video_w = $('#kv video').width();
if (video_w > w) {
var left = (w - video_w) / 2;
$('#kv video').css('left', left);
}
var top = 0;
var video_h = $('#kv video').height();
if (video_h > h) {
var top = (h - video_h) / 2;
$('#kv video').css('top', top);
}
});
}動画を縦長にも横長でも画面いっぱいになるようにめちゃくちゃ大きくして位置を数値のベタ打ちで調整するやり方もあるが、僕はこのやり方はナンセンスだと思います。
設定した大きさ以上に横長だったり、縦長だったりするウィンドウで見られた時おかしくなる。
スクリプトの実行
<script>
set_kv();
$(window).resize(function () {
set_kv();
});
</script>ウィンドウをリサイズしたときも関数を実行しておきます。
フロントエンドエンジニアをやるなら
フロントエンドエンジニアはブラウザで処理されることは徹底的にプロフェッショナルでなければならないと思います。
ユーザーはブラウザのウィンドウサイズを自由に動かすことができるので、全ての状況に適したコーディングをする必要があるのではないでしょうか。
cmsを扱うようになると、テキストの文字数が何文字で何行になるか、わかりませんよね。
そのような不確定な要素を考慮してコーディングするのが単なるHTML CSSコーダーとフロントエンドエンジニアの違いなんじゃないかな。
とは言うものの、僕はHTMLとCSSのコーディングは正直あまり好きじゃないです。
不確定な要素を考慮して、全ての状況に対応させるのはとても大変ですよね。
完璧だと思って提出したものが、PSDと違うって言われるのがストレスでもあり恐怖でもあったりします。
コメント