動画を埋め込む方法まとめ

marketing

2020年10月14日(公開: 2020年10月08日)

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

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

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

YouTube動画を埋め込む方法    

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

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

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

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

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

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

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

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

 

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

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

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

  • WordPressを使う
  • videoタグを使う

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

 

WordPressを使う

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

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

 

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

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コードに動画を埋め込む手順は次のとおり。

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

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

 

まとめ

5Gの普及に伴って、動画コンテンツは今後ますます普及していくと考えられます。
この記事では、Webサイトをはじめ、オンライン・オフライン問わずさまざまな媒体に動画を埋め込む方法を紹介しました。

動画を利用する方法としては、大きく2つに分けられます。

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

今回紹介した内容を参考にしながら、あなたの目的に合った方法や媒体を探してみてください!

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

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

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

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

資料をダウンロードする

この記事をシェア