Tarokenlog

Contact

【HTML】videoタグでヒーローヘッダーに背景動画を表示する方法

HTMLのvideoタグを使って、簡単に動画を表示することができます。

そこで、よくあるヒーローヘッダーの画像を背景動画に変えていい感じにキャッチコピーなどのテキストの背景に表示してみます。

まずデモをご確認ください。
Demo

＊スマホサイズでは非表示にして画像に変えています。


HTMLを準備

基本的に以下で動画が表示できます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>html-video</title>

	<!-- 独自CSS -->
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<!-- top -->
<div class="top">
	<video id="video1" src="ビデオのURL" muted autoplay loop>
		<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
	</video>

	<div class="headline">
		<h2>Headline here</h2>
		<p>This is a sample text.</p>
	</div>
</div>

ここで、videoタグに対応していないブラウザ用にvideoタグの中に「動画を再生するにはvideoタグをサポートしたブラウザが必要です。」などのメッセージを書いておくと良いです。

videoタグ内にsourceタグを入れることで、異なるフォーマットの動画データを複数指定できます。

これをすることで、異なるブラウザでも動画が表示される可能性が高くなります。
＊ブラウザは、記述された順に再生可能なデータを再生・表示します。
こんな感じ

<video>
<source src='ビデオのURL' type='video/ogg; codecs="theora, vorbis"'>
<source src='異なる形式のビデオのURL' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

これで動画とテキストの準備完了です。

テキストを動画の上に表示する

CSSでヘッドライン(テキスト)を中央揃えにして動画の上に表示させていきます。

body {
	font-family: 'Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
	margin: 0 auto;
}

/*--------------トップ-----------------*/
.top {
	height: 100%;
	background: none;
	position: relative;
}

.top video {
	display: block;
	width: 100%;
}

.headline {
	position: absolute;
  text-align: center;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.headline h2 {
	margin: 0;
    font-size: 52px;
    color: #fff;
	}

.headline p {
	color: #fff;
	font-weight: 100;
}

/*------------------------------------*/
/*--------------スマホ-----------------*/
/*------------------------------------*/
@media screen and (max-width: 480px) {
/*--------------トップ-----------------*/
.top {
    background: url(img/topimg.jpg);
    position: relative;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.top video {
	display: none;
}

.headline {
	width: 100%;
	position: absolute;
}

.headline h2 {
  margin: 0;
  font-size: 36px;
  color: #fff;
}

.headline p {
	color: #fff;
	font-weight: 100;
}
}

videoは無理に引き伸ばさないようにwidth:100%;にして、ヘッドラインはpositionとtransformで中央に表示しています。

スマホでは、動画によってはローディング時間が長くなるので、videoを非表示にして背景に画像を入れています。

videoタグの基本的な使い方

  • poster=“画像url”：ユーザーの環境で利用できる動画がない場合に画像を表示
  • control：再生・一時停止・再生位置の移動・ボリュームなどのインターフェースを表示
  • autoplay：ページを読み込んだ時点で動画を再生
  • preload：ページを読み込んだ時点で動画を裏側で読み込む。noneで読み込まない。

動画の形式

  • mp4：Google Chrome / Safari
  • ogv：Firefox / Opera
  • webm：Google Chrome / Opera

ブラウザによって対応している動画形式など異なるので、しっかり対応しておきましょう。

スマホだと、読み込みが遅くなりユーザーが離脱してしまう原因となる可能性もありますので、画像に切り替えるか、重い動画の使用を避け他方が良いです。

以上、videoをいい感じにヒーローヘッダーの背景に表示する方法でした〜


Posted

in

Tags: