ホームページ上で動画を自動再生させて、動画の中央に画像を被せて表示する簡単な方法

menu

Home
ＷＥＢ制作 , ＴＩＰＳ
ホームページ上で動画を自動再生させて、動画の中央に画像を被せて表示する簡単な方法

記事の詳細

Youtubeが流行っていることもあり、ホームページのトップビューで動画を流すサイトが多くなりました。
ホームページ上で動画が流れるようなサイトは中身のコンテンツも凝っていることが多いので「すごく難しい事をやっているんだろうなぁ…」と思ってしまいますが、実はそんなことはなかったりします。
ということで、今回は表題の通り「動画を自動再生させて、動画の中央に画像を被せて表示する方法」を紹介します。

今回のブログの見出しはコチラです！

1 この記事を読んでできる事（サンプル）
2 準備は簡単！動画と画像を用意するだけ！
3 設置するHTMLコード
4 CSS（スタイルシート）の設定

この記事を読んでできる事（サンプル）

下記のように、動画の上に画像を被せた表示ができるようになります。

準備は簡単！動画と画像を用意するだけ！

画像は弊社のロゴを使用します。
動画は著作権フリーで非常に良質な動画がダウンロードできる「pixabay」様のサイトから取得しました。
準備はたったこれだけですが、単純な技術だからこそ素材の質が非常に重要になるので、素材の選定にはこだわりましょう！

設置するHTMLコード

設置するコードは下記になります。

<div id="movei-contents">
  <video id="video" src="https://incloop.com/wp-content/uploads/2020/08/fishing.mp4" loop autoplay muted></video>
  <img src="https://incloop.com/wp-content/uploads/2020/08/logo.png">
</div>

1

2

3

4

</div>

上記のように、videoタグとimgタグに用意した素材のURLを貼り付けるだけでOKです。
注意点としては、videoタグには「loop」「autoplay」「muted」という属性を付けています。
「loop」は映像のループ、「autoplay」は自動再生、「muted」は動画の消音設定になります。
GoogleChromeでは「muted」属性が付いていないと「autoplay」が動かないので、その点のみ注意が必要です。

詳細は下記記事が参考になりますので、詳しく調べたい方はリンク先をご確認ください。
video: 動画埋め込み要素 – HTML: HyperText Markup Language | MDN

CSS（スタイルシート）の設定

用意するコードはたった3つのセレクタになります。

<style>
#movei-contents {
  position: relative;
  display: inline-block;
}
#movei-contents video {
  width: 100%;
}
#movei-contents img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  padding: 50px 100px;
  background-color: rgba(255,255,255,0.6);
}
</style>

1

2

3

4

5

6

7

8

9

10

11

12