動画バナーをWebサイトやブログ（WordPress）に埋め込む方法

1. はじめに

動画バナーは、静止画のバナーよりも目立つので見ている人の意識を引きつける効果があります。そこで魅力的な情報やイメージを見せることができれば、興味を持ってリンク先のサイトを訪れてくて、集客成功となります。この記事では、HTMLとJavaScriptを使って、クリック可能な動画バナーをサイトやWordPressに埋め込む方法をご紹介します。コピペで使えてカスタマイズも簡単なので、ぜひ実践してみてください。

2. 完成版サンプル

MP4の正方形動画を埋め込んで、動画をクリックするとリンク先のページが開くコードの例です。下記動画の実際の埋め込みコードです。次項を参考にカスタマイズを行ってご自身の埋め込み仕様に変更して使ってください。


<video width="360" height="360">

  <source src="https://mojiil.com/images/mojiil-direct.mp4" type="video/mp4">

  お使いのブラウザはvideoタグをサポートしていません。

</video>

3. 埋め込む動画の設定

埋め込んで表示するサイズと動画ファイルのURLを設定の設定です。埋め込みサイズはwidth（幅）で360px、height（高さ）で360pxに設定しています。この数値を変更することで自由に埋め込み表示サイズを変更できます。<source src=でアップロードした動画のURLを指定します。ワードプレスのメディアに追加した場合も、メディアの動画を開いてリンクURLをコピーしてここに貼り付けます。 <source src="ここに動画のURLを入力します" type="video/mp4">


<video width="360" height="360">

  <source src="あなたの動画のURL" type="video/mp4">

</video>

4. 自動再生とループの設定

再生オプションも設定できます。埋め込みサイズの後ろにこのように追記します。ここでは、自動再生、ループ再生、ミュート設定を追加しています。


<video width="360" height="360" autoplay loop muted>

  <source src="あなたの動画のURL" type="video/mp4">

</video>

5. スマートフォン対応

スマートフォンでの再生を最適化するための属性を追加します。


<video width="360" height="360" autoplay loop muted playsinline preload="auto">

  <source src="あなたの動画のURL" type="video/mp4">

</video>

6. クリックでURLを開く設定

JavaScriptを使用して、ビデオクリック時の動作を設定します。window.open('ここにリンク先URLを入力します', '_blank'); });


<video id="myVideo" width="360" height="360" autoplay loop muted playsinline preload="auto" style="cursor:pointer;">

  <source src="あなたの動画のURL" type="video/mp4">

</video>



<script>

  document.getElementById('myVideo').addEventListener('click', function() {

    window.open('リンク先のURL', '_blank');

  });

</script>

7. WordPressへの埋め込み方

WordPressでは、「カスタムHTML」ブロックを使用して上記のコードを埋め込みます。

投稿/ページ編集画面で「ブロックを追加」をクリック
「カスタムHTML」ブロックを選択
上記で編集したコードをそのまま貼り付けます。

注意：一部のテーマやプラグインと競合する可能性があるため動作チェックを必ず行ってください。

8. よくあるトラブル

よくある問題と解決策：

動画が再生されない：ファイルパスが正しいか確認
自動再生されない：muted属性が設定されているか確認
スマホで再生されない：playsinline属性を追加

9. まとめ

この記事では、HTMLとJavaScriptを使ってクリック可能な動画バナーをサイトやWordPressに埋め込む方法をご紹介しました。このような動画バナーは、モジイルを使うと簡単に作成できます。モジイルは動画テンプレートをWebサイトで編集してダウンロードできるツールです。無料で使えるのでコチラも併せてご活用ください。バナー動画が集客、販売、アフィリエイトなど、各種マーケティング活動でお薬にたてると幸いです。

さらに学びたい方は、HTML5のビデオ機能やJavaScriptのイベント処理について調べてみることをおすすめします。

この記事を参考に、魅力的な動画バナーを作成し、サイトのengagementを高めてください！