先回は、ホームページに画像を読み込む方法について解説いたしました。 今回は動画を配置する方法についてもご紹介しておきたいと思います。
ホームページに動画を配置する
静止画に比べ、動画をトップページなどに配置するとページの表現力を向上させることができるため、最近の動画が配置されたページが増えてきました。
動画のサイズが大きすぎるとページの読み込みに時間がかかってしまうことなど、いくつかの問題はあるものの、ページの印象を劇的に変化させることができる方法でもありますので、参考になさってください。
ホームページに動画を配置する方法
１．動画を指定の場所に保管する
HTMLと同じ階層か、その下の階層に動画を保存しましょう。質の高い画像を使用したい場合には以下のAdobe Stockからダウンロードすることをおすすめします。このAdobe Stockの活用方法に関しては別の記事でご紹介したいと思います。
２．videoタグをHTMLに配置する
動画を再生するためのタグは「video」です。 これを配置することによりHTMLから動画を呼び出し自動再生など動きを制御することができます。
<video src=”” >でタグを配置します。なおこのタグの中に以下のものを記入すると動画の再生を制御できます。
autoplay＝自動再生
loop ＝動画のループ再生
muted ＝消音 ※ 多くの動画には音声が付いています。しかし、ホームページに配置する場合は消音設定にするのが無難です。ホームページが開いた瞬間音声が再生されることに不快感を感じるユーザーは多いからです。もしどうしても音声を配置したい場合には、「次のページに移動すると音声付きの動画が再生されます」などの説明をつけておくほうがよいでしょう。
poster=”” ＝ 動画が再生されない場合のサブ画像 ※ 動画を再生するための<video>タグがサポートされていないブラウザも存在します。 なお、以下の記述を行なえば、最近のすべてのブラウザで動画を配置できますが、以前のバージョンの「Internet Exprorer」などを使用しているユーザーなどへの配慮として念のため、動画が再生されない場合には画像が表示されるようにしておきます。
以上の点をHTMLに記入すると以下のようになります。※なお以下はサンプルのために外部から動画を再生していますが、ご自分のPCに動画がある場合には、以下のリンクパス「src=””」を調整してください。
HTML
<div class="header">
<div class="video-container">
<video src="https://player.vimeo.com/external/181445574.hd.mp4?s=d24f32d879305e931468d55e4d7ce6efb5a95c39&profile_id=119" autoplay loop muted poster="img/sample001.jpg">
</video>
</div>
</div>
３．CSS側にスタイルを記述する
少し複雑になりますので、どうぞコピペしてお使いください。これらの記述は、指定の範囲にうまく画像を配置するためのスタイリングになります。
今回は「ヘッダー」部分の背景に動画が再生されるようにしたいと思いますので、高さを300px , 幅を100%としています。
もしご希望の範囲が別の大きさであるなら、以下のCSSの「.video-container」の部分にある「min-width: 100%;」と「height: 300px;」を調整してください。
CSS
.video-container {
position: absolute;
top: 0;
bottom: 0;
min-width: 100%;
height: 300px;
overflow: hidden;
border: 0;
transform:
translateZ(-#{$scroll-factor * 2}px)
scale(1 + $scroll-factor * 2);
float: right;
}
.video-container video {
position:absolute;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
４．動作確認
いかがでしょうか。 無事に動画を再生できましたでしょうか？ 以下のようにどのブラウザでページを開いて動画が再生されていれば問題なく設定ができています。
５．補足（サンプルコード）
念のため以下にHTMLとCSSのサンプルコードを記しておきます。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>はじめてのホームページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="video-container">
<video src="https://player.vimeo.com/external/181445574.hd.mp4?s=d24f32d879305e931468d55e4d7ce6efb5a95c39&profile_id=119" autoplay loop muted poster="img/sample001.jpg">
</video>
</div>
</div>
</div>
<div class="main">
<div class="main-contents">
メインコンテンツ
</div>
<div class="right-navi">
右側のカラム
</div>
</div>
<div class="left-navi">
左側のカラム
</div>
<div class="footer">
ここにはフッターメニューが入ります
</div>
</body>
</html>
CSS
body{
background-color: lightyellow;
}
.header {
height: 300px;
}
.video-container {
position: absolute;
top: 0;
bottom: 0;
min-width: 100%;
height: 300px;
overflow: hidden;
border: 0;
transform:
translateZ(-#{$scroll-factor * 2}px)
scale(1 + $scroll-factor * 2);
float: right;
}
.video-container video {
position:absolute;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.footer{
height: 200px;
background: black;
color: #fff;
clear: both;
}
.main-contents, .left-navi, .right-navi {
height: 400px;
}
.main-contents {
background-color: red;
color: #fff;
float: left;
width: 80%;
}
.left-navi {
background-color: blue;
color: #fff;
width: 20%;
float: right;
}
.right-navi {
background-color: green;
color: #fff;
float: right;
width: 20%;
}
.main{
width: 80%;
float: right;
}
@media screen and (max-width: 600px){
.main, .left-navi,.main-contents, .right-navi{
width: 100%;
}
}
まとめ
１．<video src=”” >タグで動画をHTMLを呼び出す
２．autoplay、 loop 、muted、poster=”” で動画の再生を制御する
でした。
参考になったなら幸いです。