ホームぺージにおしゃれな動画を「自動再生」で埋め込む方法

ホームぺージにおしゃれな動画を「自動再生」で埋め込む方法をお伝えします。

なお、この方法は、Youtubeの動画を使うのではなく、下記のように、自分で用意した動画を「自動再生」でホームページに掲載する方法です。

このような動画をワンポイントで入れると、動きもあり、ホームページがおしゃれに見えますよね！

また、ここでは、ホームページの背景で動画を流す方法も合わせてお伝えするので、ぜひ参考にしてくださいね。

手順１：動画ファイルをダウンロードする。

まずは、ホームページで流す動画ファイルを用意します。
たとえば、下記ページで、動画ファイルを無料でダウンロードできますよ。

・https://www.pexels.com/ja-jp/videos/
・https://pixabay.com/ja/videos/

手順２：動画を入れたい箇所に、下記のソースを入れる。

<video width="550" autoplay loop muted>
<source src="douga.mp4" type="video/mp4">
お使いのブラウザは動画の再生に対応していません。
</video>

なお、上記のソースを使うときは、「動画のファイル名」を変更してください。

現在は、「douga.mp4」にしていますけど、この動画のファイル名を、表示させたい動画のファイル名に変更するという形です。

【注意】

「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、 HTMLファイル（index.htmlファイルなど）と同じ場所に、動画ファイルを保存するようにしてください。

手順３：ホームページ上に動画が表示されることを確認する。

ホームページの表示を確認して、動画が表示されていることを確認してください。
動画が自動再生で流れたら、確認作業は完了です。

動画の大きさを変更するには、HTMLファイルに入れた記述の中で、下記のように「width」の数字を変更することで、動画の大きさを変更できます。

動画に、「再生、停止、音量調整」などのコントロールバーを表示したい場合は、HTMLファイルに入れた記述の中で、下記のように「controls」を入れることで、コントロールバーを表示できます。

ホームページの背景で動画を流す方法

さらに、ホームページの背景で動画を流す方法もお伝えします。

具体的には、このページの背景も「空の動画」が流れていますよね？
このような、ホームページの背景で動画を流す方法をお伝えします。

手順１：CSSファイル（style.css）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。

上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。（一番下に、上記のソースを追加するのが、分かりやすいと思います）

手順２：背景で動画を流したいページ（HTMLファイル）の <body>タグの真下に、下記のソースを入れる。

なお、上記のソースを使うときは、「動画のファイル名」を変更してください。

現在は、「douga.mp4」にしていますけど、この動画のファイル名を、背景に表示させたい動画のファイル名に変更するという形です。

【注意】

手順３：ホームページの背景で動画を流れていることを確認する。

ホームページを開いて、背景で動画が流れていることを確認してください。
動画が自動再生で流れたら、確認作業は完了です。

もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。

「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。

【よく読まれている関連記事】