【html5】videoタグを使った動画の挿入方法とは？コンテンツに動画を埋め込む方法も徹底解説

運営しているWebサイトに動画を埋め込みたいと思ったことはありませんか？

HTML5のvideoタグを知ってはいても、初めのうちはどう設定すればいいのかよくわからないですよね。

今回は、動画を使ってサイトのコンテンツを増やしたいと考えている方のために

などについて詳しく解説していきます。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

videoタグとは？何ができるの？

HTML5には動画を埋め込むことができるvideoタグが用意されています。

このタグを使えば、MP4などの動画をWebサイト内に挿入でき、より多くの情報を伝えることができるようになります。

動画視聴するためにページを移動したり、ツールをダウンロードしたりする必要がないので、ユーザーにとってもサイトの利便性が高まります。

ただ、videoタグは設定項目が多く、きちんと設定しているつもりでも予想通りに再生しない、などの問題が生じてしまいます。

その辺りも記事の中で丁寧に説明していきます。

未経験でも確実にプログラミングスキルを身につけられる！
【DMM WEBCAMP】では、専属コーチが卒業まで伴走します！

✔短期間で効率的にプログラミングスキルを身につけたい
✔プログラミングを独学で進めていくのが不安
✔家での時間を有効に使ってスキルアップがしたい
といった方におすすめです！

＼実践的なスキルが身に付くカリキュラム／

videoタグの属性の種類は？10個すべて紹介

videoタグは基本的に

<video src="sample.mp4" 属性></video>

という形で使います。

この属性の部分に必要なものを付け加えて、動画再生の設定を行うことになります。

srcも属性の1つです。これも含めた属性の数は10種類あります。

それぞれについて、詳しく見ていきましょう。

src属性について

<video src="sample.mp4"></video>

src属性では、再生したい動画ファイルがある場所を指定します。

再生できる動画はファイル形式は、

となっています。

あとで詳しく書きますが、ユーザーの環境によって再生されない可能性があるので、複数の動画ファイルを作って設定しておいた方が良いですね。

autoplay属性について

<video src="sample.mp4" autoplay muted></video>

auto(自動)とplay(再生)とある通り、動画を自動再生させるかどうかを指定します。

ただ、Chrome、Safariなどブラウザによっては、音を出さないmuted属性を一緒に付けておかないと、自動再生されません。

音がある動画の場合は、muted属性を付け、ユーザーが音量調節できるcontrols属性を付けると良いでしょう。

muted属性について

<video src="sample.mp4" muted></video>

muted属性を指定すると、動画再生の音声がなくなります。

いきなり音が鳴って、訪れたユーザーに迷惑がかかることを避けることができます。

先ほど説明したようにautoplay属性と併せて使うことが多く、ブラウザによっては、この設定がないと自動再生されません。

loop属性

<video src="sample.mp4" autoplay muted loop></video>

loop属性は、動画をループ再生、つまり繰り返し再生するようにできます。

上記のコードのように、autoplay属性とmuted属性を付けると、自動再生のミュート動画が繰り返し再生されます。

短いパラパラ漫画のような動画を繰り返して面白い効果を狙う使い方もありますね。

controls属性について

<video src="sample.mp4" controls></video>

controls属性を指定すると、コントロールパネルが表示されるようになります。

コントロールパネルでは、動画の音量・再生・停止・再生位置などをユーザーが自由に設定できます。

サイトに訪れたユーザーが利用しやすくなるので、特別な理由がない限りは設定しておきましょう。

autoPictureInPicture属性について

<video src="sample.mp4" autoPictureInPicture></video>

autoPictureInPicture属性を指定すると、別アプリなどに移動した際に、自動的にピクチャインピクチャモードに切り替わります。

ピクチャインピクチャモードは、動画を再生したまま小画面モードにして画面の隅に置くことができます。

これにより、動画を再生しながらテキストを読んだり、他の作業を行うことができます。

width/height属性について

<video src="sample.mp4" width="300px" height="175px"></video>

width属性とheight属性を使って、動画の幅と高さの指定をします。

ただ、設定できる単位は「px」のみで、レスポンシブのサイトに併せてサイズを変えられるというようなことはできません。

スタイルを設定できるCSSを使えば、他の単位も使えて柔軟に動画サイズを変えられるので、そちらを使用することをおすすめします。

こういう方法もある、という形で記憶しておく程度で問題ありません。

playsinline属性について

<video src="sample.mp4" autoplay muted playsinline></video>

playsinline属性を指定することで、スマホ画面で動画再生する際に全画面に表示されないようにできます。

これをインライン再生といい、この設定をしていないと、自動的に全画面再生になります。

インライン再生にしておくと、動画再生したままWebページの文章や画像を見たりでき、より多くの情報をユーザーに提供することができます。

playsinline属性は、autoplay属性とmuted属性も一緒に記述する必要があり、これらがない場合、インライン再生ができません。

忘れずに設定しておきましょう。

poster属性について

<video src="sample.mp4" poster="thumb.jpg" controls></video>

poster属性では、動画のサムネイルのように、再生前に表示する画像の指定ができます。

ユーザーが動画を再生したくなるような、動画の中身が分かるような画像にしておくことをおすすめします。

ユーザーが再生ボタンを押せるように、controls属性も一緒に記述しておきましょう。

ここで指定した画像は再生前に表示されるだけで、再生後には表示されません。

ユーザー側の環境で動画再生できない場合に表示される画像でもあります。

preload属性について

<video src="sample.mp4" preload="none"></video>

preload属性は、事前に動画ファイルを読み込むかどうかを設定することができます。

指定できる値は3つです。

事前に動画ファイル読み込んでしまうと、動画再生だけでなく、テキストや画像などWebページの他の箇所の表示も遅らせてしまいます。

動画の内容にもよりますが、動画の優先順位が低い場合は、「none」を指定しておくことをおすすめします。

空文字「preload=””」が指定されている場合は「auto」が適用され、属性自体の記述がない場合は、ブラウザによって動作が変わってしまいます。

「metadata」の場合は、動画のサイズや再生時間などのメタデータのみが事前にダウンロードされます。

再生されない可能性がある？各ブラウザに対する設定方法

ユーザの環境によって、動画再生がされない可能性も考えられます。

sourceタグを使用すると、動画ファイルを複数指定することができます。

<video controls>
<source src="sample.mp4"></source>
<source src="sample.webm"></source>
<source src="sample.ogg"></source>
<p>動画再生に対応していないブラウザです。</p>
</video>

より多くのユーザーが動画再生できるように、フォーマットの違う動画ファイルをいくつか用意し、指定しておいた方がいいでしょう。

上から順番に再生可能かどうか判断します。

videoタグに対応していないブラウザの場合は、メッセージなどの代替コンテンツを表示させることができます。

【DMM WEBCAMP】は受講生の97%が未経験からのスタート！
充実のサポート体制で、プログラミングスキルを確実に身につけられます！

✔一人ひとりに合わせた学習計画で進められるため、仕事や学校と両立できる
✔未経験者のために開発された実践的なカリキュラムを用意
✔︎専属コーチが卒業まで学習をサポート

＼目的別で選べる3つのコース／

スマホで再生できない！それぞれの解決方法

PCでは問題なく再生できても、なぜかスマホで再生できない、ということもあります。

それぞれのスマホでよくある問題の解決方法を紹介します。

Androidについて

Androidで動画が再生できない場合の原因は、Webページ自体にかかっているベーシック認証であることが多いようです。

ベーシック認証は、Webページに閲覧制限を設ける際にパスワードをかける手段として、よく使用されています。

ブラウザアプリによっては、このベーシック認証が邪魔をして動画再生できない、という不具合が生じることがあります。

Androidで見てもらうことを想定する場合、この機能は外した方が良いでしょう。

iPhoneについて

iPhoneで動画が再生されない場合、 videoタグ内のplaysinline属性を確認してみてください。

playsinline属性はインライン再生させるための指定で、動画を再生させたままWebページを見ることができます。

iPhoneではこの記述がないと、動画が再生されません。

iPhone以外でもスマホの場合はインライン再生させた方がより多くの情報を伝えられるので、基本的にplaysinline属性を指定しておいた方が良いでしょう。

その他、スマホに適した設定方法

スマホで動画再生を考えたときに、容量の大きい動画は注意が必要になります。

スマホユーザーは月々の決まったデータ通信量で契約している場合が多く、データ通信量の上限を超えた際に、通信量に制限がかかってしまう可能性があるからです。

迷惑となってしまうので、動画ファイルの容量が大きい場合、自動再生の機能は入力しない方が良いでしょう。

WebサイトにYoutube動画を埋め込む方法

これまで HTML5のvideoタグを使って、Webページに動画を埋め込む方法を説明してきました。

この他に、Youtubeに投稿した動画をWebページに埋め込む方法があります。

Webページに張り付けるコードの取得はYoutubeの中でできるため、コードの知識がない方でも簡単にできます。

もちろん、コードの知識があった方がカスタマイズの選択肢が増えるので、少しずつ覚えていきましょう。

Youtube動画を埋め込むメリット

videoタグを使う方法と比較すると、Youtube動画を埋め込むやり方には、下記のメリットがあります。

Youtubeに投稿した動画を引用している形であり、サーバーに直接アップロードしているわけではないため、サーバーの負担を減らすことができます。

また、Youtubeは多くの人が利用している動画サイトです。

Webサイトだけでなく、Youtubeにも動画を投稿しておくことで、そこからの流入を見込むことができます。

そして、容量の大きい動画をサイトに載せていると、動画の読み込みだけでなく、ページ内のテキストや画像の表示速度が遅くなり、ユーザーにストレスを与えてしまいます。

ページの読み込みが遅いと感じて、すぐに閉じてしまう人もいるでしょう。

SEO上では、ユーザーの滞在時間は指標の1つとなっています。

Youtube動画が埋め込まれているページは、それだけ滞在時間も長くなるため、重要なコンテンツとして判断される可能性が高いです。

具体的なやり方

Youtube動画を自身のWebサイトに埋め込みたい場合、以下の方法で行います。

パラメータとは？Youtube動画のコードを編集

先ほど出てきた「パラメータ」とはどういうものなのでしょうか？

パラメータの設定を行うと、埋め込んだ動画の再生方法をカスタマイズすることができます。

URLの最後に「?」をつけてパラメータを付け加えることができます。

https://www.youtube.com/embed/[動画ID]?パラメータ=値

複数のパラメータをつなげる場合は「&」を利用します。

パラメータの中でも、よく使うと思われる以下の6つのパラメータを紹介します。

それぞれのパラメータについて、見ていきましょう。

autoplayについて

<iframe width="640" height="360" src="https://www.youtube.com/embed/[動画ID]?autoplay=1"></iframe>

autoplayは、自動再生するかどうかを指定することができます。

伝えたいことが動画にあり、すぐに見てもらいたい場合に有効な方法です。

ただ、ユーザーの判断と関係なく勝手に流れてしまうため、テキストを読む邪魔をしてしまう可能性があります。

設定していない場合は、「autoplay=0」となっています。

loopについて

<iframe width="640" height="360" src="https://www.youtube.com/embed/[動画ID]?loop=1"></iframe>

loopは、動画の停止ボタンを押すまでループ再生される機能です。

短めの動画を繰り返し再生したいときなどに利用します。

何も設定していない場合は値はloop=0で、これを1に指定するとループ再生します。

start/endについて

<iframe width="640" height="360" src="https://www.youtube.com/embed/[動画ID]?start=20&end=150"></iframe>

start/endでは、再生開始と終了の位置を指定します。

秒数での指定になります。

見せたい部分だけ再生させることで、ユーザーの購買意欲を高めたり、飽きないようにさせる効果があります。

modestbrandingについて

<iframe width="640" height="360" src="https://www.youtube.com/embed/[動画ID]?modestbranding=1"></iframe>

動画の下の方に表示されるYoutubeロゴを非表示にすることができます。

設定していない場合は、modestbranding=0なので、非表示にしたいときには1にしておきましょう。

ユーザーを動画に集中させる効果があるため、特に理由がない場合は非表示にすることをおすすめします。

controlsについて

<iframe width="640" height="360" src="https://www.youtube.com/embed/[動画ID]?controls=0"></iframe>

ロゴだけでなく、コントロールバー全体を非表示にしたい場合に使用します。

コントロールバーでは、再生位置や音量の設定ができます。

そのため、短い動画を自動再生とループ再生させたいときにこれと併せて指定することが多いです。

設定していない場合は、controls=1なので、非表示にしたい場合はこれを0にします。

cc_load_policyについて

<iframe width="640" height="360" src="https://www.youtube.com/embed/[動画ID]?cc_load_policy=1"></iframe>

常に字幕を表示しておきたい場合に使用します。

英語の動画の翻訳を字幕で載せておきたいときなどに有効的です。

設定していない場合は、cc_load_policy=0となっています。この状態でも、視聴者が字幕の設定をしていた場合は、その設定の字幕が表示されます。

cc_load_policy=1にすることで、視聴者の設定に関わらず、字幕を表示させることができます。

埋め込んだ動画をレスポンシブ対応させる方法

PCで見たときと、タブレットやスマホで見たときとでは、画面のサイズが異なりますよね。

そのため、スマホで見たときに動画が画面からはみ出て途切れてしまっている場合があります。

そうならないために、ユーザーの環境に合わせて柔軟にサイズ調整するように設定する必要があります。

こういうデザインをレスポンシブWebデザインといいます。

動画ファイルをアップロードした場合と、Youtube動画を貼りつけた場合の両方について、レスポンシブ対応の仕方を説明します。

動画ファイルをレスポンシブ対応させる

パラメータの設定など細かい部分は異なりますが、下記の方法でレスポンシブ対応できます。

<div class="video-file">
<video controls>
<source src="sample.mp4"></source>
<source src="sample.webm"></source>
<source src="sample.ogg"></source>
<p>動画再生に対応していないブラウザです。 </p>
</video>
</div>

@media screen and (max-width: 780px) {
.video-file {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.video-file video {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
}

埋め込んだYouTube動画をレスポンシブ対応させる

YouTube動画の場合も、動画ファイルのときと同様の設定でレスポンシブ対応が可能です。

<div class="youtube">
<iframe src="//www.youtube.com/embed/動画ID" allowfullscreen></iframe>
</div>

@media screen and (max-width: 780px) {
.youtube {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
}

Webサイト以外のコンテンツに動画を埋め込む方法を解説

これまでHTMLのvideoタグを使った動画の埋め込み方法とYoutube動画の埋め込み方法をそれぞれ紹介してきました。

ここからは、それらを応用して、以下のコンテンツに動画を埋め込む方法を紹介します。

WordPressに動画を埋め込む

WordPressは、HTMLやCSSの知識がなくともWebサイトやブログが作れるソフトウェアです。

サーバーを用意する必要がありますが、WordPress自体は無料でダウンロードできます。

WordPressを使えば、投稿画面から簡単に動画を埋め込むことができます。

動画を埋め込む方法は以下の2つです。

それぞれ見てきましょう。

動画ファイルをWordPressにアップロードする方法

投稿画面の上部に「メディアを追加」という部分があるので、そこをクリックして動画ファイルをアップロードします。

ファイルをアップロードすると、メディアが並ぶメディアライブラリの中にファイルが保存されます。

「投稿に挿入」をクリックすると、記事の中に貼り付けることができます。

Youtube動画を貼り付ける方法

Youtubeの動画ページを開いて、表示されたURLを投稿画面に貼り付けるだけでも動画のアップロードは可能です。

細かい設定をしたい場合は、「共有」ボタンから「埋め込む」を選択して、埋め込みコードを取得します。

この記事でも紹介したように、コード内のURLにパラメータを追加すれば、動画再生の設定ができます。

Twitterに動画を埋め込む

Twitterでツイートされている動画を見たことはあるでしょうか。

Twitterでも自分が持っている動画を簡単にアップロードできるので、その方法を説明します。

WordPress同様に、Twitterにアップロードする方法は以下の2つです。

動画ファイルをアップロードする

ツイート作成画面には、画像や動画を追加できる画像アイコンがあります。

そこを選択すると、ローカルフォルダが開き、追加したいファイルを選べるようになります。

追加できるファイルは、画像・動画・GIF画像のいずれかです。

動画を追加した後は、文章などを書いてツイートができます。

動画のサイズの上限は512MB、長さは2分20秒となっています。

上限を超える動画を投稿したい場合は、次に紹介するYoutube動画を貼り付ける方法を使いましょう。

Youtube動画を貼り付ける

Youtube動画を貼り付けるには、Youtubeの共有の機能を使います。

貼り付けたい動画ページの「共有」をクリックして、「Twitter」を選択します。

ここでもTwitterのツイート作成画面が開くので、ツイートの中身を確認してツイートしてください。

動画のURLやタイトルなどはすでに書き込まれています。

この共有機能を使わなくとも、動画ページのURLをツイート投稿画面にコピー&ペーストする方法で、問題なくツイート内に埋め込むことができます。

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

QRコードに動画を埋め込むことができれば、手紙やカードに印刷して人に渡すこともできます。

ローカルに保存した動画ファイルをQRコードに動画を埋め込む方法を紹介します。

動画ファイルのURLを作成する

QRコードにするためには、URLがないといけないので、まずは動画のURLを作るところから始めます。

動画をYoutubeに投稿すればURLとして取得できますが、それ以外には

という2つの方法があります。

iPhoneなどのApple製品を持っている場合は、iCloudの機能を使用できますし、Androidの場合はGoogleフォトを使用できます。

PCではどちらも利用できるので、状況に合わせて選択してください。

動画ファイルをアップロードすると、その動画のURLを共有できるようになります。

動画ファイルのURLをQRコードに変換

上記の方法で得られたURLをQRコードに変換します。

こちらも変換アプリやツールが複数ありますが、PCの場合

などがおすすめです。

どちらもURLを入力するだけで簡単にQRコードを作成できます。

QRコードを作成できれば宣伝の幅が広がりますので、手段の1つとして持っておくと便利ですよね。

この動画ってダウンロードしていいの？著作権侵害について

動画をダウンロードする際に注意するべきことを紹介します。

Webサイトにアップロードされた動画は、アプリやツールを使用することでダウンロードすることが可能です。

ただし、その動画が音源や映像などの著作権を侵害した違法アップロードだった場合、違法だと知っておきながらダウンロードすることも著作権法違反となります。

違法ダウンロードの罰則は、2年以下の懲役または200万円以下の罰金になります。

利用目的が私的であったとしても罪になります。

少しでも怪しい動画はダウンロードしないようにしましょう。

まとめ：HTML5のvideoタグを扱うには属性を理解することが大事

今回は、HTML5から適用されたvideoタグを使って、Webサイトに動画を埋め込む方法について説明しました。

videoタグには属性を記述する必要があり、それらの機能をきちんと理解することが大事です。

加えて、Youtube動画を使用する方法やWordPressなどの他のコンテンツへの埋め込み方法も紹介しました。

動画を埋め込む方法は1つではないので、状況に合ったやり方を選択していきましょう。

今回の記事が少しでも参考になれば幸いです。