marketing

2021年04月06日（公開: 2020年07月29日）

【保存版】HTML5・videoタグでHPに動画を埋め込む方法まとめ

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タグ内の動画ファイルの後ろに記載するのが一般的です。

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

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＝再生となり、表示された動画を自動で再生します。

のように記載すると思うかもしれませんが、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属性が設定されているのに再生されない場合は動画ファイルの問題を疑ってみましょう。

さまざまなコンテンツに動画を埋め込む方法

WEBサイトにYouTube動画を埋め込む

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

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

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

STEP1：YouTubeから埋め込みコードを取得
STEP2：Webサイトにコードを埋め込む
STEP3：動画の表示サイズを設定する

WEBサイトにYouTube動画を埋め込む場合の具体的な手順や設定については、下記の記事で詳しく解説しています。

→YouTube動画をWebサイトに埋め込む方法【初心者にもわかりやすい！】

ストリーミング配信する

動画ファイルが大きくなると、ファイルの読み込みに時間がかかってしまいます。
videoタグでは、動画をダウンロードしながら再生できる「ストリーミング配信」を利用することもできます。
ストリーミング配信は、YouTubeをはじめとした動画配信プラットフォームで最も一般的な配信方法です。

ストリーミング配信を利用するには、HTMLファイルに

<video controls>

　　<source src=”動画ファイルのパス″>

</video>

という形で記述します。

ストリーミング配信については「videoタグでストリーミング配信する方法」で詳しく解説しているので、あわせてご覧になってください。

WordPressに動画を埋め込む

WordPressを使う

「WordPress（ワードプレス）」は、世界で最も人気があるCMS（コンテンツ・マネジメント・システム）です。
CMSとは、サイト作成システムのこと。
WordPressを使えば、HTMLやCSSといった専門知識がなくても、動画を扱うことができます。

WordPressにはYouTube動画を埋め込むこともできますが、サーバーにオリジナルの動画をアップロードして埋め込むことも可能です。

WordPressを利用した動画の動画の埋め込み方については「WordPressで動画を埋め込む2つの方法」で詳しく解説しているので、あわせてご覧になってください。

Twitterの投稿に動画を埋め込む

Twitterの投稿に動画を埋め込む方法も大きく分けて2つあります。

YouTube動画を埋め込む
YouTube以外の動画を埋め込む

Webサイトに埋め込む場合と同じように、YouTube動画を利用する方法がもっとも手軽です。

動画ファイルをアップロードする場合は、ファイル形式（フォーマット）やファイルサイズ、動画の長さに制限があるので、あらかじめ確認しておくといいでしょう。

ファイル形式	MP4・MOV
ファイルサイズ	512MBまで
動画の長さ	2分20秒まで

Twitterで動画を利用する方法については「Twitterの投稿に動画を埋め込む方法」で詳しく解説しているので、あわせてご覧になってください。

PDFファイルに動画を埋め込む

PDFファイルに動画を埋め込む方法

一般的には文章や画像で構成される「PDFファイル」にも、動画を埋め込むことができます。
動画を活用すれば、文章や画像で伝えきれない情報を補うことが可能です。

PDFファイルに動画を埋め込む際には、Adobe社が提供する「Adobe Acrobat DC」を利用する方法が一般的です。
無料体験版を利用することもできるので、興味のある方はぜひ試してみてください。

Adobe Acrobat DCの導入手順については、「PDFファイルに動画を埋め込む方法」で詳しく解説しているので、あわせてご覧になってください。

QRコードに動画を埋め込む

QRコードに動画を埋め込む方法

LINEの友達追加やQRコード決済に利用されている「QRコード」にも、動画を埋め込むことが可能です。
作成したQRコードを印刷すれば、チラシやパンフレットといったオフラインの媒体から動画を見てもらうことができます。

QRコードに動画を埋め込む手順は次のとおり。

動画のURLを取得する
URLをQRコードに変換する

URLの取得やQRコードへの変換方法などは、「QRコードに動画を埋め込む方法」で詳しく解説しているので、あわせてご覧になってください。

【著作権侵害に注意！】埋め込まれた動画のダウンロード

Webページに埋め込まれた動画は、ツールやサービスを利用することでダウンロードすることができます。
しかし、埋め込まれた動画が著作権を侵害するものであった場合、その動画をダウンロードすることは違法行為です。
最悪の場合、刑事罰に問われる可能性もあるので、安全性を十分に確認できない場合ダウンロードしてはいけません。

埋め込み動画のダウンロードについては「埋め込み動画のダウンロードの注意点」で詳しく解説しているので、あわせてご覧になってください。