WordPressで作ったホームページのヘッダーに任意の動画を挿入できます。
YouTubeの動画を貼り付けしてもよいですが、容量の軽いMP4動画を作って、HTML5の<video>タグで貼り付けると、任意のサイズ・縦横比で貼り付けできます。
MP4動画の貼り付けは、環境により動画が再生できない場合に備えて代替画像を設定できるため、基本的にノーリスクです。手持ちに動画がある場合はチャレンジしてみては如何でしょうか。

↓こんな感じです。クリックで動画が再生します。

■準備するもの
①動画データ……任意サイズのMP4動画
②画像データ……動画が表示されない場合代替で表示する画像
③貼付け用のHTMLコード……HTML5のvideoタグ
④動画の格納場所……軽量の動画であればお使いのWEBサーバーでOK

 

■作業手順

①動画と画像を用意する

サイトに適したサイズ・縦横比のMP4動画を用意します。動画が再生できない場合に代替表示す画像は、動画のスクリーンショットで良いでしょう。

＜関連記事＞
→任意サイズのMP4動画をVideoStudioで作る方法
→ヘッダー動画の制作サービス

データサイズは画質と容量のバランスを取るのが重要です。多少画質を落としてでも、軽い動画になるよう調整した方が良いと思います。理想は1～2MB程度です。

 

②動画と画像をWEBサーバーにアップする

契約しているWEBサーバーに動画と画像をアップします。ルートフォルダにmovieやimgフォルダを作って格納すると分かりやすいと思います。アップロードにはffftp等のFTPソフトを使います。

 

③貼付け用のHTMLコードを準備する

下記の任意のパターンをコピーして、アップロード先URLの箇所を書き換えます。
動画コントローラーを非表示にすると、スマートフォンでは動画が再生できなくなる場合があります。また、スマートフォンでは動画の自動再生設定は無効になります。

A、自動再生＆繰り返し再生する場合（動画コントローラーなし）
<video src=”動画のアップロード先URL” poster=”代替画像のアプロード先URL” autoplay loop></video>

B、自動再生＆繰り返し再生する場合（動画コントローラーあり）
<video src=”動画のアップロード先URL” poster=”代替画像のアプロード先URL” autoplay loop controls></video>

C、自動再生して動画の最後のフレームで静止（動画コントローラーなし）
<video src=”動画のアップロード先URL” poster=”代替画像のアプロード先URL” autoplay></video>

D、自動再生して動画の最後のフレームで静止（動画コントローラーあり）
<video src=”動画のアップロード先URL” poster=”代替画像のアプロード先URL” autoplay controls></video>

＜補足　動画のコントローラーは　あり・なし　どちらがいい？＞
好みの違いですが、私は非表示にする場合が多いです。スマートフォンでは動画の再生ができなくなる場合がありますが、代わりにヘッダー画像が表示されるので、見た目がスマートな方が良いと考えています。何が何でも見てもらいたい、重要なヘッダー動画であれば、コントローラーを表示します。

 

④HTMLコードをWordPressのヘッダーに貼り付ける

「ダッシュボード」→「外観」→「テーマの編集」→画面右側の一覧から「テーマヘッダー（header.php）」を開きます。
表示されたソースは全選択コピーして、メモ帳等にバックアップしておきます。
表示されたソースの一番下に、動画貼付け用のHTMLコードを追記して「ファイル更新」を押します。

 

以上の手順に間違いがなければ、ヘッダーに動画が加わっているはずです。テーマによっては、ヘッダー画像の箇所を動画貼り付け用のHTMLコードに置き換えることで、ヘッダー画像を動画化できます。

---

→デジタルサイネージ導入と動画制作のご相談
→30秒で御社に最適なデジタルサイネージを調べる方法

---