videoタグでHPに動画を埋め込む方法【HTML5・ブラウザ対応】

YouTubeやMP4の動画をホームページやWEBサイトに埋め込む場合、HTML5で用意されているvideoタグを利用すると簡単に行えます。しかし、埋め込み方法によっても自動で再生させたり、繰り返し再生、ブラウザ対応をさせる方法など色々あります。

そこでこの記事では、videoタグの埋め込み方法や細かい設定についてご紹介します。初心者の方向けに紹介していきますので、記事を読んで目的や用途にあった埋め込み方法を見つけて、動画を活用してみてくださいね。

videoタグで動画を埋め込む方法

WEBサイトに動画を掲載するにはvideoタグという、HTMLコードを使う必要があります。

個人ブログや企業ホームページなどを運営している方は「HTML？」「タグって何？」と思う方がいるかもしれません。

現在のWEBサイトの多くはWordPressというCMSで作られており、HTML&CSSを理解していなくても簡単に操作することができ、普通にブログ記事を更新したり、ブログのウィジェットを操作したりすることも直感的に行うことができます。

YouTube動画に関しては記事後半で詳しく解説しますが、videoタグについて詳しく知らなくても簡単に埋め込むことができます。

WEBサイトに掲載するときに全ての動画をvideoタグを利用しなければならない訳ではありませんが、videoタグを利用した方が色々と応用を効かせることができるので、埋め込む方法を覚えておいた方が良いでしょう。

YouTube動画を簡単に埋め込む方法を利用しても、結局はvideoタグで入力されているので、何か変更を加えたい場合でも、タグについて知っておくことで、アレンジを加えることができます。

videoタグは<video 〜>の〜の部分に様々な属性を設定することができ、自動で再生させたり、動画が終了したタイミングで最初にループするなどの機能を簡単に実装することができます。

具体的には<video src=”video.mp4″></video>の様にvideoタグを使います。

HTMLなどのコードを見るのが嫌いな方もいるかもしれませんが、本当に簡単で知っておくと非常に便利です。

ちょっとした動画の変更にわざわざ人に依頼するのは面倒ですし、無駄なコストがかかってしまいます。

実際に利用する属性はそれほど多くないので、最低でも以下の属性を知っておくようにしましょう。

videoタグの属性一覧

videoタグ内に動画ファイルを入力するだけで動画をブログや企業サイトに埋め込むことはできますが、様々な属性を設定することで、動画の使用目的に合わせて機能を持たせることができます。

videoタグで主に使用する属性は以下の10種類になります。

属性タグの使い方は非常に簡単で、videoタグの中に書いていくだけです。

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

このようにvideoタグ内の動画ファイルの後ろに記載するのが一般的です。

属性の中には他の属性と併用しないと機能しない物もあるので、それぞれの属性の特徴と使い方を解説していきます。

• autoplay＝自動で再生
• autoPictureInPicture＝小画面再生
• controls＝コントロール操作
• width/height＝幅と高さ
• loop＝繰り返し再生
• muted＝音声
• playsinline＝再生画面の領域
• poster＝再生前のサムネイル画像
• preload＝動画読み込み
• src＝動画ファイル挿入

【autoplay】自動で再生

正しいautoplayの入力方法→<video src=”video.mp4″ autoplay muted></video>

音声を出したい場合→<video src=”video.mp4″ autoplay muted controls></video>

autoplayは名前の通り、auto＝自動、play＝再生となり、表示された動画を自動で再生します。

<video src=”video.mp4″ autoplay></video>

のように記載すると思うかもしれませんが、autoplayの場合はmuted属性と併用しなければChrome、Safari共に自動再生させることはできません。

muted属性は以下で解説しますが、動画を無音にすることができ、自動で再生されてもいきなり音が出るなんて心配もありません。

autoplayとmutedは併用して入力されていないと、そもそも自動で再生することはできないので、覚えておきましょう。

「じゃあ音声を効かせたい動画はどうなるの？」と心配になるかもしれませんが、音を効かせたい場合はこの後解説するcontrols属性を併用し、ユーザーが自由に音量を調節することができる機能を実装します。

このように属性は複数併用することも多いのです。

【autoPictureInPicture】小画面再生

<video src=”video.mp4″ autoPictureInPicture></video>

autoPictureInPicture属性とは、動画を再生する際に、再生しながら小画面モードにすることができる機能で、実装しておくことで、Webサイト上で動画を見ながら、他のテキストも見ることができる様になり、ユーザーの利便性を向上させます。

autoPictureInPictureを入力すれば、自動的に小画面のピクチャインピクチャモードにすることができるので、特に理由がなければ設定しておくのがおすすめです。

【controls】コントロール操作

コントロールパネルを表示させる→<video src=”video.mp4″ controls></video>

autoplayとmutedを入力して音声を出したい場合に解説したcontrols属性を設定すると音量だけでなく、再生・停止・再生箇所などをユーザーが自由にコントロールできるようになります。

YouTube動画を見たことがある方なら分かると思います。

コントロールパネルは動画の内容にもよりますが、基本的には設定しておいた方がユーザーの為になるでしょう。

見たい箇所を見ることができずに自動で再生されてもお客様に伝えたい情報を届けることは難しいです。

コントロールパネルを表示させない方が良い動画というのも特にはないので、特別な理由がない場合はcontrols属性を設定しておきましょう。

【width/height】幅と高さ

<video src=”video.mp4″width=“200px” height=“133px”></video>

width/heightはプログラミングを少し知っている方なら分かるかもしれませんが、width＝幅、height＝高さのことを言い、videoタグ内で動画の大きさを決めることができます。

それぞれの設定は%ではできず、pxでの設定しか行えません。

動画のサイズを決める方法は実はこの方法以外にもCSSで設定する方法があり、CSSでの設定の場合%入力も行えて応用が効くのでおすすめです。

あまりvideoタグ内でwidth/heightは設定する必要がないので、こんなやり方もあるくらいで覚えておいてください。

【loop】繰り返し再生

<video src=”video.mp4″ autoplay muted loop></video>

loop属性は名前の通り、動画をloop＝繰り返すことができます。

動画の自動再生を設定している場合はloop属性も併用して使う場合が多いです。

自動で繰り返すことができるので、GIF画像のように短い動画を繰り返す際に面白い表現を行うこともできます。

上記の様に入力すれば自動で再生され、無音にし、繰り返すことができます。

こんな感じでvideoタグ内に属性を複数設定することで、色々な機能を持たせることができ、非常に便利です。

【muted】音声

<video src=”video.mp4″ autoplay muted></video>

muted属性は先ほど解説した通り、autoplayと併用して使う場合が多いです。

muted属性を入力していると音声なしの動画にすることができます。

自動再生では、いきなり音が流れてしまいユーザーの迷惑になってしまいます。muted属性を設定していなければ、自動で再生させることはできないので、必ず入力する必要があります。

ChromeとSafari同様にautoplay属性ではmutedが必須です。

muted属性を設定してもcontrols属性も合わせて入力していれば、初期設定は音声なしで、ユーザーが音声を自由に調節できるようにすることも可能です。

音声が重要ではないバッググラウンドで流す動画などは必ずmuted属性を設定するようにしましょう。

【playsinline】再生画面の領域

<video src=“video.mp4” autoplay muted playsinline></video>

playsinline属性を入力すると、スマホで動画が表示される際に自動で全画面に表示されないようにすることができます。

playsinline属性を入力していない場合、スマホで見た場合に自動で全画面表示になってしまいます。

もちろん動画に集中して見たい場合は全画面表示の方が良いかもしれませんが、LPに動画を埋め込んでいる場合、動画を見ながらテキストを見たり、画像を見たりした方がユーザーに多くの情報を伝えることができます。

全画面再生ではなく、WEBページを見ながら再生する方法をインライン再生と呼ぶのですが、このインライン再生を行うには上記のように入力する必要があります。

autoplay属性とmuted属性を併用しないとインライン再生を行うことはできないので覚えておきましょう。

【poster】再生前のサムネイル画像

<video src=“video.mp4” poster=“thumb.jpg” controls></video>

poster属性はYouTube動画でいうとサムネイル画像のように、動画が再生される前に表示される画像を設定できるようになります。

動画の内容がひと目で分かるような画像を設定するようにして、動画を見なければならない、見た方が良いと思わせるような画像にするのが大切です。

poster=”〜”の間に画像ファイルを設定します。

poster属性はcontrols属性と併用して使い、画像を見たユーザーが再生ボタンを押せるようにしましょう。

poster属性を入力して表示される画像は、初めて再生される前の一度だけで、再生後に停止しても再度表示されることはありません。

【preload】動画読み込み

<video preload=“none” src=“video.mp4”></video>

preload属性は動画をアップしたWEBページの表示速度に関わる属性です。

一般的に動画ファイルをアップしたWEBページの表示速度は遅くなり、動画の再生にかかる時間はもちろん、その他のテキストや画像の表示も遅延させてしまいます。

そうならないようにpreload属性を設定して、動画ファイルを読み込む順番を決めておきましょう。

preload属性で入力できるのは以下の3つになります。

・none：事前にファイルの読み込みを行わない
・metadata：先にメタ情報を読み込む
・auto：動画データを事前に読み込む

上から動画ファイルを優先しない順番になっています。

その動画がテキストや画像よりも重要である場合はautoを設定しますが、そうではなく、必ず動画を再生しなければならない訳ではなければnoneを設定しておくのがおすすめです。

【src】動画ファイル挿入

<video src=”video.mp4″></video>

srcは今まで見てきた通り、読み込む動画ファイルを入力します。

src=”〜”の〜の箇所に埋め込みたい動画ファイルを入力します。

再生することができる動画ファイル形式は以下の形式です。

・mp4
・webm
・ogg

の3種類です。mp4のファイル形式を利用することが多く、問題なく再生することができるので、mp4のファイルは必ず用意するようにしましょう。

ただし、ユーザーの再生環境によってはもしかすると再生されない可能性もなくはないので、保険として、複数動画ファイルを設定しておくこともできます。

以下でその方法を解説していきます。

videoタグを各ブラウザに対応させる方法

videoタグに設定した動画ファイルをどのブラウザでも再生するように設定するには以下のように複数の動画ファイルを用意しておく方法がおすすめです。

入力方法は以下のようになります。

<video controls>
<source src=“video.mp4”></source>
<source src=“video.webm”></source>
<source src=“video.ogg”></source>
※現在の環境は動画再生に対応していません <!– 動画が再生されない時のメッセージ –> </video>

事前に動画ファイルを変換しておき、複数用意しておけば簡単に設定することができるので、ぜひ試してみてください。

デバイスによってエラーが出る場合の対応方法

しっかりとvideoタグを設定し動画を埋め込んでいても、デバイスによって再生されない可能性もあります。

なので動画ファイルをアップしたら各デバイスでしっかりと再生されるか、属性が正しく機能しているかを必ずチェックするようにしましょう。

以下でデバイス別の解決方法を解説していきます。

再生しない場合は原因を見つければ何も難しいことはないので、落ち着いてなぜ再生されないのか考えていきましょう。

• Android
• iPhone

Android

Androidユーザーで動画が再生されない原因の多くはベーシック認証という制限にかかってしまっている可能性が高いです。

ベーシック認証とは、WEBページにアクセスできるユーザーを制限してしまうことで、動画を再生するには、ベーシック認証を解除しなければなりません。

詳しい方法は長くなってしまうので、「Androidベーシック認証解除方法」などでググってみてください。

iPhone

iPhoneで動画が再生されない原因の多くはplaysinline属性が入力されていないことです。

インライン再生でないと動画を表示させることができません。

なのでほとんどの場合playsinline属性の設定は必須になってくるでしょう。

iPhoneユーザー数は多く、今やLPや企業サイトもスマートフォンからの閲覧が8割を占めるので、何か特別な理由がない限りplaysinline属性を設定しておくようにしましょう。

もしplaysinline属性が設定されているのに再生されない場合は動画ファイルの問題を疑ってみましょう。

YouTube動画を埋め込む方法

YouTube動画をブログや企業サイトに実装する方法はvideoタグを色々と設定するよりも直感的に埋め込むことができます。

YouTube動画をWEBサイトに掲載することは今後ブログやメディアを運営する上でかなり多くなってくるはずです。さらにYouTube動画が掲載されているWEBページはSEO上も上位に表示されやすい傾向があるので、YouTube動画の埋め込み方は必ず覚えておきましょう。

方法は非常に簡単で、以下の3STEPで埋め込むことができます。

• STEP1：埋め込みたいYouTube動画下部の共有を選択
• STEP2：開始位置の設定を行い、コードをコピーする
• STEP3：コピーしたコードを貼り付ける

STEP1：埋め込みたいYouTube動画下部の共有を選択 

「出典：https://www.youtube.com/watch?v=Kij8AQegcN4」

まずは埋め込みたいYouTube動画のページにいき、動画下部にある共有を選択します。

共有を選択すると左から「埋め込む」「Twitter」「Facebook」・・と複数選択できるはずなので、1番左にある「埋め込む」を選択します。

「出典：https://www.youtube.com/watch?v=Kij8AQegcN4」

埋め込むを選択すると、ここまで解説したようなHTMLコードが表示されます。

STEP2：開始位置の設定を行い、コードをコピーする

「出典：https://www.youtube.com/watch?v=Kij8AQegcN4」

表示されたコードを見てもらうと分かると思いますが、YouTubeの共有コードではvideoタグではなく、iframeタグで入力を行います。

iframeタグでも問題なく再生することはできるので、ここではあまり気にせずに進んでください。

YouTube動画では開始位置をあらかじめ設定しておくことができ、動画の中で特に見せたい部分がある場合に設定するようにしましょう。

設定方法は非常にシンプルで、「開始位置」の左側にあるチェックボタンにチェックを入れて、希望開始位置のタイムを入力するだけです。

開始位置を設定すると右側のコードに自動で反映されているので、「command＋A」で全選択を行い「command＋C」でコピーを行いましょう。

STEP3：コピーしたコードを貼り付ける

最後にコピーしたコードを貼り付けます。

コピーしたコードをHTML編集やコード入力画面で貼り付けを行います。

貼り付けることができたらプレビュー画面で一度確認し、正しく再生されるか？開始位置は適応されているかを確認しましょう。

YouTube動画はiframeタグで貼り付けられているので、videoタグ属性と完全に同じではありませんが、autoplayやwidth/heigthは変わりませんので、多少は変更を加えることができると思います。

参考：YouTubeヘルプセンター

まとめ

今回はvideoタグを使って動画をWEBサイトに埋め込む方法を解説しました。

WEBサイトに動画を掲載するメリットは多く、ページの滞在時間を伸ばし、ページのSEO評価を高める効果もあります。

videoタグを使えばどのブラウザにも適応させた動画を簡単に埋め込むことができ、自動再生やループ再生などを属性によって設定することができます。

この記事を参考にして、ぜひあなたのブログや企業サイトに動画を活用してみてください。

プロクオリティの動画をだれでも簡単に作れる｢RICHKA」

RICHKAを使えば、だれでも簡単にプロクオリティの動画を作れます！

RICHKAは｢Yahoo! JAPANクリエイターズプログラム」公式ツールに採択されており、Yahoo! JAPANや日経ビジネスなど、広告代理店や大手メディアをはじめ400社以上の企業様にご愛用いただいております。

動画制作の時間やお金などのコストでお悩みの方は、まずはお気軽に資料をダウンロードしていただけますと幸いです。

資料をダウンロードする