WordPressのヘッダーにMP4動画を貼り付ける方法

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秒で御社に最適なデジタルサイネージを調べる方法

2 opinions on “WordPressのヘッダーにMP4動画を貼り付ける方法”

  1. 初めまして。オヤマと申します。ワードプレスのサイトに動画を掲載したく試行錯誤していたところ、貴殿のサイトに出会いました。便利な機能の情報提供感謝申し上げます。
    踏み込んでご質問させてください。
    ①貼付け用のHTMLコードを準備する「C」で設定しましたがうまくいきません。再生ボタンはありますがクリックしても反応がない状態です。動画ファイルがMOV ファイル (.mov)だからでしょうか?
    ②代替画像を設定しない記述の仕方はありますか?
    ③ヘッダーではなく、ワードプレスのTOPページ(ウィジェット)に動画を掲載する方法はありませんか
    ユーチューブを使わずHTMLで自動再生できればよいのですが?

    見知らぬものの突然の質問で、まことに恐縮いたしますがなにとぞよろしくお願い申し上げます

    1. オヤマさん、こんにちは。

      ①について
      再生ボタンがあるということは記述事態は間違っていないと思われます。調べたところ.movはhtml5のvideoタグでサポートされて居ない様子ですね。H.264エンコードの.mo4形式をおすすめします。

      ②について
      poster=”代替画像のアプロード先URL”の箇所を削除すると代替画像は消えます。但し動画の読み込み前や再生できない環境では空白ができると思います。

      ③について
      ワードプレスのテーマにもよりますが、ウィジェットの「テキスト」はHTMLの記述が可能です。ウィジェットを任意の場所に配置して、記述してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA