【Web】背景に動画を使う2017/04/26

背景が動画のWebサイトよく見かけますよね。

そんな動画背景も使う際にはいくつかの大切なポイントがあります。

それをまとめたものが下記になります。

 

[まとめ]

・サイトのメッセージを伝えられるものを-背景動画が主役ではないため、カッコイイという理由ではなくメッセージを伝える用途として使う

・コンテンツが多いサイトでは不向き-余白の確保が難しいため

・長さは12秒~20秒前後が適当-長すぎると見切れず、短いとせかされているかのよう

・音楽は流さない-訪問者を驚かしてしまうため

・軽くする-容量は5MB以下で理想は500KB

・代替画像-背景動画に対応していないブラウザ向け

・モバイル対応-重くなる対策として静止画像など

・荒い画質を馴染ませるための対策-CSSでのストライプ(divのbackgroundをrgbaで半透明食指定でかぶせる)やドット画像(PNG,GIF)など

 

実装には「背景に動画を使ったWebサイトの作り方」にて下記のように紹介されていました。

他にもjQueryでの実装方法も同記事にて紹介されていますので、興味のある方はそちらをご参照ください。

【HTML5】

<p>テキスト</p>
<div class=”video-wrap”>
<p>Brilliant Blue</p>
<video src=”動画URL” autoplay loop>
<img src=”画像URL” alt=”Placeholder”>
</video>
</div>

 

【CSS】

.video-wrap {
position: relative;
}
p {
font-family: serif;
color: #fff;
font-size: 400%;
position: absolute;
left: 30%;
top: 200px;
z-index: 1;
}

 

また、「[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック(IE8、スマホへの対応方法」では、古いブラウザ対策やモバイル対策についても紹介されていました。

そのた詳細は「[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック(IE8、スマホへの対応方法」をご参照ください。

【video要素をサポートしていない古いブラウザ対策】

<head>
<!–&#91;if lt IE 9&#93;>
<script>
document.createElement(‘video’);
</script>
<!&#91;endif&#93;–>

<style>
video { display: block; }
</style>
</head>

 

【モバイルでの取り扱い】

@media screen and (max-device-width: 800px) {
html { background: url(polina.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}

 

[参考サイト]:<video>タグで動画を埋め込む

[参考サイト]:背景に動画を使ったWebサイトの作り方(2014/02/12)

[参考サイト]:[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック(IE8、スマホへの対応方法(2014/09/05)