今回はWebサイトの背景に動画を埋め込んで、キーヴィジュアルにする方法を紹介します。
html5で登場したvideo要素を使用することによって、ユーザー環境側のFlashの設定に左右されず動画を再生することができます。
video要素に使用される代表的な属性一覧
| width | 動画の表示する幅を指定 |
| height | 動画の表示する高さを指定 |
| src | 埋め込む動画ファイルのURLを指定、video要素の内部で<source>を使用することも可能 |
| autoplay | データの読み込みが完了した時点で動画を再生する |
| controls | 再生や音量などを操作するユーザー･インターフェイスの表示指定 |
| muted | 動画の初期状態の音声を消音に指定 |
| poster | 埋め込む動画の変わりに表示する画像ファイルのURLを指定 |
| playsinline | 全画面のビデオプレイヤーを起動させずにページ内で動画を再生 |
動画は静止画と異なり、backgroundプロパティに動画ファイルを指定することはできないため、ちょっとした工夫が必要になります。
今回は3つの例をサンプルとしてあげていきます。
1.Video要素のwidthを100％にしてブラウザ幅で伸縮する
HTML
<div class="video-container">
<video src="https://tech-dig.jp/wp/wp-content/uploads/2018/05/test.mp4" autoplay playsinline muted loop></video>
<div class="video-sidebar">
<h1>Title</h1>
<p>This video is sample.</p>
</div>
</div>
CSS
.video-container {
position: relative;
}
.video-sidebar {
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
}
video {
width: 100%;
}
ブラウザの幅に合わせて等比率で動画が伸縮します。
動画の全体を見せることができますが、フルスクリーン背景にはなりません。
2.video要素を親として、その中に要素を子として自由配置していく
HTML
<div class="video-container">
<video src="https://tech-dig.jp/wp/wp-content/uploads/2018/05/test.mp4" autoplay playsinline muted loop></video>
<div class="sidebar">
<h1>Title</h1>
<p>This video is sample.</p>
</div>
</div>
CSS
.video-container{
position: relative;
overflow-x: hidden;
}
.sidebar{
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 100%;
background-color: rgba(255,255,255,0.8);
}
video要素をposition:relativeの親として、そのブロック内にposition:absoluteで子要素を自由配置していく方法です。
動画の幅がはみ出て横にスクロールしないようoverflow-xではみでた要素を隠しています。
ブラウザの幅関係なくフルスクリーンになりますが、子要素が親要素である動画の高さを超えてしまうと下にはみ出てしまいます。
3.videoタグをbodyの閉じタグの直前に配置してその上に要素を乗せていく書き方
HTML
<div class="sidebar">
<h1>Title</h1>
<p>This video is sample.</p>
</div>
<div class="video-container">
<video src="https://tech-dig.jp/wp/wp-content/uploads/2018/05/test.mp4" autoplay playsinline muted loop></video>
</div>
CSS
.video-container{
position: fixed;
top: 0;
bottom:0
width: 100%;
height: 100%;
z-index: -9999;
}
.sidebar{
position: fixed;
width: 30%;
height: 100%;
background-color:rgba(255,255,255,0.8);
}
HTMLの最も下にvideo要素を設置してz-indexで重なり順を最下層に指定し、positionで固定します。
あとはこのvideo要素より上にHTML要素を設置していく方法です。
フルスクリーン表示できますが、ブラウザの高さ以上の要素を配置するとスクロールできないので見えなくなってしまいます。高さを%表示で指定したりする工夫が必要です。
以上が動画を背景に埋め込む方法になります。
レイアウトやコンテンツによって最適な方法を使い分けていくといいでしょう。
最近ではWebページに動画を掲載する際には、youtubeなどの動画共有サービスにアップロードしてAPIを利用してタグを埋め込むのが主流ですが、直接動画を埋め込むテクニックも１つの方法だと思いますので是非活用していきましょう。
