コラム

ホームページに動画を埋め込むには？HTML・YouTubeでの手順と注意点を解説

弊社に動画制作を依頼するお客様の多くが成果物をホームページに掲載します。例えば商品紹介動画であれば商品ページの補足として、採用動画であれば採用ページに動画を掲載します。また、企業ブランディング動画であれば企業ページやトップページなど動画とホームページは切り離せない関係と言っても過言ではありません。今回は、作成した動画をホームページに掲載する一般的な方法に関してご紹介します。

ホームページに動画を掲載するメリットとは？

「赤い花」の情報をテキストで正しく伝えたい時は、色のニュアンスやフォルムの状態も細かく書く必要があります。しかし、伝えたい花を360度ぐるりと映した動画を使えば言葉がなくとも正確な情報が伝わります。動画を使えば工夫次第で最初の3秒でも刺激や驚き、そして本質を与えられます。

総務省の「令和元年度情報通信メディアの利用時間と情報行動に関する調査報告書」では、動画の利用は全年代で前年度より増加しています。ユーザーの日常に欠かせないコンテンツとして浸透している動画をホームページへ掲載して商品やサービスに注目を集められれば、商品の認知度や売上向上が期待できます。動画の公開はもはや企業・組織に必須であると言えるでしょう。

ホームページに動画を掲載する方法

多岐にわたる可能性の広がりを期待して作成した動画をホームページに掲載する方法をご紹介します。ホームページに動画を掲載するには、大きく３つの方法があります。それぞれをご紹介いたします。

videoタグでホームページへ動画を埋め込む方法

すでにご存知の通りWebサイトはHTML/CSSで記述されています。このHTMLは、それぞれを表現するのにタグが用意されており、タイトルであれば「ヘッダータグ」、段落であれば「パラグラフタグ(pタグ)」、画像であれば「イメージタグ(imgタグ)」などが存在します。そして、これらのように動画には「ビデオタグ(videoタグ)」が用意されており、これを活用すればホームページ上で動画を表現することが可能になります。また、このタグは表示サイズや自動再生の設定などビデオの制御にも対応しています。

videoタグの属性一覧

動画をWebサイトに埋め込むためのHTMLコードは、

「<video src=”video.mp4″ 属性></video>」

というタグを使用します。「属性」に当たる部分には、自動再生をする・繰り返し再生をする・サムネイルの設定といった細かい設定情報が入ります。

主なvideoタグの属性は以下の通りです。videoタグの属性は複数を併用できるので、組み合わせて使いたい場合は必要な属性を選択しましょう。

• コントロールパネル表示：<video src=”video.mp4″ controls></video>
  見たい部分へ進める、もしくは見逃した部分を再度見たい場合などにコントロールパネルで動画の再生状況をコントロールできるようにする設定です。これはユーザービリティの向上につながるので、特別な事情がない限り設定しておくとよいでしょう。
• 自動再生：<video src=”video.mp4″ autoplay muted></video>
  自動再生されるための設定です。自動を意味する「autoplay」だけでなく、無音を意味する「muted」も記載されています。videoタグに自動再生の「autoplay」を記載しただけだと、Google ChromeでもAppleのSafariでも自動再生されないようになっています。そのため、「muted」も併記するようにしましょう。ユーザーに音を聞かせたい場合は、先述したコントロールパネルの表示でユーザーが音声を出力させられます。
• 繰り返し再生：<video src=”video.mp4″ autoplay muted loop></video>
  動画が一度終了しても、繰り返し再生できるようになります。特にTikTokなどのショート動画では繰り返し再生が設定されている場合がほとんどです。また、GIFのように超短編の動画は、繰り返すことで面白みが増します。
• サムネイルの設定：<video src=“video.mp4” poster=“thumb.jpg” controls></video>
  YouTubeのサムネイルのような画像を設定できるのがposter属性です。poster属性の設定で表示させるサムネイル画像は、その動画を初めて再生する前に一度だけ表示されます。再生後に停止しても再度サムネイルが表示されることはありません。興味をそそる効果的なサムネイル画像を設定できれば、クリック率・再生率も上がることが期待できます。この属性タグを使う場合は、poster=”～”の間に画像ファイルを設定します。
  poster属性を使う際は、controls属性と併用し、画像を見たユーザーが再生ボタンを自分で押せるようにしておくのがおすすめです。
• 幅と高さの指定：<video src=”video.mp4″width=“200px” height=“133px”></video>
  動画のサイト内での表示幅と高さを設定できる属性タグです。width＝幅、height＝高さを表しています。この幅と高さは、px(ピクセル)設定のみ有効です。
  動画のサイズは、CSSで設定する方が%入力もできるので応用力が高めです。HTMLコードでの設定が慣れてきたら、CSSでの設定にもチャレンジするとよいでしょう。

videoタグで掲載する際の注意点

videoタグで動画を埋め込む際の注意点として「mp4なのに動画が再生できない場合」と「デバイスによって動画が再生できない場合」の2点を解説します。

mp4なのに再生できない場合：
メディアプレーヤーには、音声や映像を再生するために必要な「コーデック」というプログラムがインストールされています。通常ではmp4の動画が再生できるはずのプレーヤーでも、何らかの問題で動画が再生されなくなる場合があります。その原因のひとつに「コーデックの不具合」が挙げられます。

Aで圧縮された動画ファイルは、それに対応したコーデックをもつメディアでしか再生できませんが、エラーが「コーデック不足」の場合は使用しているデバイス（PCやスマホ、タブレットなど）に必要なコーデックをインストールすればファイルは復元し再生できます。

また、Aと似通ったコーデックが多数インストールされている場合は、コーデック同士が競り合い、誤ったコーデックでファイルを再生しようとした結果、正しい再生ができません。この場合は不要なコーデックを削除し、再度動画を再生します。このように、mp4の動画ファイルが正しく再生されない場合は、コーデックが原因と予想し、「AVC方式」や「H.264形式」でmp4ファイルを改めて書き出すという解決法もあります。

デバイス別で動画が再生できない場合：
PCでは再生できる動画が、スマートフォンでは再生できないなど、デバイスによって動画が再生不可になる場合があります。

Androidで動画が再生できない場合、「ベーシック認証」が原因で再生されていないのかもしれません。この場合は、ベーシック認証を解除すれば再生できます。

iPhoneで再生できない場合、原因は動画側の属性にplaysinline属性が入力されていないため、ということが多いようです。iPhoneユーザーにも動画を見てもらいたいなら、特別なケースを除きタグにはplaysinline属性を入力するようにしましょう。

YouTubeなどの動画配信サービスの動画を掲載する方法

次に、YouTubeにアップした動画をホームページに掲載する方法を解説します。

YouTubeの動画をホームページへ掲載する手順

掲載したい動画がすでにYouTubeにアップされている場合は、HTMLタグを使うよりも簡単に動画をホームページに埋め込むことができます。手順は次の通りです。

1. YouTube上にある該当の動画をクリックし、動画タイトル右下にある「共有」をクリックする
2. 共有クリック後に表示される「リンクの共有」ボックス内にある「埋め込む」を選択すると、動画の埋め込みタグが表示される
3. 「iframe」で始まる埋め込み用のソースコードをコピーし、ホームページ管理画面から掲載したいページにペーストして掲載する

YouTubeの動画をホームページへ掲載するときのオプション設定

YouTubeの動画をホームページに掲載する場合も、埋め込みコード選択時に複数のオプションが存在します。例えば動画の開始位置や終了位置、コントロール表示の有無もオプションで設定できます。中でも一般的に使うことの多いオプションをご紹介します。

• 開始位置の指定：start
  指定された秒数分を進めた位置から、動画の再生がスタートします。
• 特定の位置で停止：end
  動画を特定の位置で停止させる際に再生開始からの秒数で指定します。controls=0はコントロールを非表示で、デフォルトは表示あり設定(controls=1)です。
• コントロールの表示：controls
  動画プレーヤーのコントロール表示の有無を設定できます。
• 自動再生：autoplay
  動画がサイト内で表示されたときに、最初の動画を自動再生するかどうかの設定です。デフォルトは0で自動再生しません。

動画配信プラットフォームを活用する

前述した方法以外に自社専用の動画配信プラットフォームを活用する方法もあります。例えばVimeoやWistia、Vidyardなどグローバル企業が提供するSaaSが有名です。これらは動画をホスティングできるだけでなく、マーケティング的な数多くの機能を有しています。例えばどこまでビデオが見られているのかや、数秒後にフォームを表示してメールアドレスを取得するなども可能です。MAツールと連携すればビデオを最後まで見た人に対して自動でメールを配信したり、数日後に次のステップのビデオを閲覧させるようなメール通知などが可能になります。

メリット・デメリットを理解して最適な方法を選択する

これまで解説したように動画をホームページに埋め込む方法は大きく3種類あります。videoタグで埋め込む方法は、依存している外部の動画プラットフォームの影響を受けないのがメリットですが、ホームページ用に使っているサーバーに大きな負担がかかります。YouTubeの動画をホームページに埋め込む方法は、サーバーへの負荷はかかりませんが、一般的に公開された情報ということになります。そのためホームページの情報を補完するというよりも動画だけで完結できるものである必要があります。また、最後に紹介した動画配信プラットフォームを活用すれば、自社のサーバーなどに負荷をかけることなく、さらには分析まで可能になるというメリットを享受することが可能です。

動画制作はプロに任せるのが安心

せっかく時間をかけて動画を作り、再生も正しくできるように埋め込んだのにあまり再生回数が伸びないという場合もあります。これは、そもそもユーザーにとって魅力的な動画が作成できているのか、という根本からの見直しが必要です。

動画作成・編集ツールは初心者でもすぐに使えるものが数多くありますが、ユーザーに対し強く訴求ができる動画を作りたい場合は、動画作成・掲載に精通しているプロに相談するのも重要です。ヒューマンセントリックスでは、法人の動画制作に特化しており、様々なビジネスシーンに対応できます。長年の実績や制作経験を生かし、お客様のご要望に沿いながら動画企画から掲載までをワンストップでサポートします。ホームページに掲載する動画にお困りでしたらぜひご連絡いただければ幸いです。

まとめ

動画作成後にホームページへ掲載するには、大きく３種類の方法があります。すでにご紹介したように、それぞれメリットやデメリットが存在します。それぞれの目的などに応じて最適な方法でホームページへ動画を掲載するようにしましょう。