【保存版】動画を埋め込む方法まとめ｜HTML・PDF・QRコード

こらから動画を活用していきたい方に向けて、各種媒体に動画を埋め込む方法をまとめました。
Webページだけでなく、PDFやQRコードに埋め込む方法もあわせて紹介していきます！

【Web】YouTube動画を埋め込む方法

Webページにビデオを埋め込む方法は、大きく2つに分けられます。

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

現在は、YouTube動画を利用する方法が一般的です。

YouTube動画を利用するメリットとしては、

YouTubeとWebサイトの両方に流入が見込める
サーバーに負担がかからない
SEO上有利になる可能性が高い

といったことがあげられます。

YouTube動画を埋め込む方法はとても簡単。
利用したい動画ページから埋め込み用のコードを取得して、Webサイトに張り付けるだけ。
パラメーターを設定することで、動画の表示方法、再生方法などをカスタマイズすることもできます。

具体的な手順等は「YouTube動画を埋め込む方法」で詳しく解説しているので、あわせてご覧になってください。

【Web】YouTube以外の動画を埋め込む方法

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

WebサイトにYouTube以外の動画を埋め込む方法は２つあります。

WordPressを使う
videoタグを使う

それぞれの特徴を見てみましょう。

WordPressを使う

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

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

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

videoタグを使う【HTML5】

【HTML5】videoタグを使う

2014年に公式発表された「HTML5」では、「videoタグ」が実装されたことによって、動画を手軽に扱うことができるようになりました。
HTMLファイルの中で、

<video src="動画ファイルのパス"></video>

という形で記述するだけで動画を埋め込むことができます。

YouTubeを埋め込む場合と同じように、動画の表示方法、再生方法などをカスタマイズすることも可能です。

videoタグの使い方については「videoタグで動画を埋め込む方法」で詳しく解説しているので、あわせてご覧になってください。

ストリーミング配信する場合

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

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

<video controls>

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

</video>

という形で記述します。

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

デバイスによってエラーが出る場合

設定内容によっては、スマートフォンで動画が正常に再生できないことがあります。

「ベーシック認証」を設定している場合
「playsinline属性」が入力されていない場合

詳しい内容については「videoタグで動画を埋め込む方法」をご覧ください。

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

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

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