YouTubeの動画をWebサイトに表示する

YouTubeの埋め込み動画を表示
動画 Youtube

このページは、2025年02月13日に作成したページです。
このページに掲載している仕様・機能・操作手順は、現在リリースされているバージョンと異なる場合がございます。

YouTubeは、世界最大の動画共有プラットフォームで、今や既存のテレビ番組に変わるコンテンツになりつつあります。

基本的には、YouTubeのウェブサイト上での視聴を目的としていますが、お客様のWebサイト上での動画埋め込みが可能で、基本的に無料で利用できます。

このページでは、YouTubeにアップロードした動画を自社サイトで利用したい方向けの説明です。

 

このページの内容は次のお客様に関係あるかもしれません。

  • Webサイトに動画コンテンツを表示したい
  • 動画を使った視聴サービスを開始したい(オンライン授業等)
  • 動画を使って製品やサービスの説明をしたい
  • 動画を使ってWebサイトの視覚効果を高めたい

心当たりがある場合は、お読みください。

YouTube埋め込み動画の料金

WebサイトにYouTubeの動画を埋め込みして再生させる事は、基本的に無料です。

Googleから料金を請求される事はありません。(2025年現在)

 

では、全てのサービスが無料で提供されているというと、そうではありません。以下YouTube で使えるAPIで説明している通り、YouTube動画のメタデータや視聴回数等のデータ、視聴者分析データ…など、YouTubeが収集しているデータ取得と利用には、課金システムが存在します。また、自前の動画のアップロードシステムの制作やChat GPTなどのAIとの連携、関連動画の制御等もAPIを通じて制御する事が出来ますが、こちらも有料で利用できるAPIになります。

例えば、自社の公開している動画の視聴者分析(再生時間や年齢・性別・地域等)を自前のアプリを開発して可視化したい場合などに利用します。

埋め込み動画にYouTubeを使えないケース

WebサイトにYouTubeの動画を埋め込みして再生させたいだけなら、それほど障壁はございません。

一つ気になる点とすれば、YouTubeのロゴとリンクを消す事が出来ないという点です。

ただ、今や大手企業の公式サイトでも、当然の様にYouTubeの埋め込み動画は利用されていますし、余程隠匿性の高い動画じゃなければ、気にはならないと思われます。

また、動画視聴を販売する行為は禁止されています。有料動画や会員制サイトなどで視聴自体で収益を得る事は禁止となります。

例として、動画自体を会員制で視聴可能にして会費を取る事は禁止されています。ただ教育目的のオンライン授業の様な場合は、禁止されていません。

この様に、どこまでが禁止されていて、どこまでが許可されているのか?はYouTubeの利用規約を良く理解した上でコンテンツ制作を行う必要がございます。

 

 

動画視聴を制限してYouTubeを利用する場合

利用OKな場合

  • リンクを知っている人だけで閲覧可能とする
  • 生徒のGoogleアカウントのみに視聴を限定する
  • 教育用Googleアカウントのみに視聴を限定する

 

教育機関が生徒用の為に、オンライン授業を開催する事はOKで、企業が社員向けに動画を限定公開する事も可能。
つまりその動画自体で収益を上げる行為では無い為、利用できます。また、Youtubeには、教育機関向けの機能が用意されておりGoogle Workspace for Educationを契約する事で、学内ネットワークやログイン制御と組み合わせて 生徒のアクセス範囲を制御可能となっています。

 

利用NGな場合

  • 課金したユーザーのみ動画リンクを知らせる
  • 課金したユーザーのGoogleアカウントのみ視聴可能とする
  • 著作権を侵害していたり、侵害する恐れのある動画の公開

 

例として、課金ユーザーのみが閲覧できる動画教材の配信は出来ません。つまり、その動画自体を販売する目的での利用は出来ません。
例えば、教材の一部として動画視聴を可能としていたとしても、収益を得る商材の一部と見なされるので削除又はアカウント凍結される可能性があります。

 

これ以外には、次の様なコンテンツで利用する場合は、YouTubeの埋め込み動画を利用できません。

 

  • 視聴者制限が必須の動画※2
  • 自社オリジナルのUI(コントロールなど)が必須の場合
  • 外部サイト離脱を絶対させたくない場合

 

※ 非公開設定にする事で、特定のGoogleアカウントを持っているユーザーのみ視聴を制限する事は可能ですが、ユーザーが多いと大分手間。

 

YouTubeを使えない動画コンテンツを制作する場合は

自前のサーバーを用意するか、vimeoなど動画プラットフォームを利用する方法などがあります。

当社までご相談いただければ、適切な動画コンテンツ公開方法をご提案しますので、ご相談ください。

YouTubeにアップロードした動画の利用方法

基本的にはYouTubeの共有から発行したコードをHTML内にコピペするだけでその動画が表示されます。

Youtube動画の「共有」→「埋め込む」で表示されるコードをコピー&ペーストすれば、好きなページに動画を埋め込む事が可能です。

但し、そのまま発行したコードを埋め込むだけで良い場合や、専門的な知識を持ってコーディングする必要がある場合がございます。ページのデザインに沿った方法で埋め込んだり、レスポンシブ表示するには専門の知識が必要です。当社にご依頼ください。

 

動画を動的に制御したい場合

例えば、特定の位置にスクロールされた直後に再生を開始したいなど、動画に対する制御もある程度は可能です。これは、iframe Player APIが提供している機能を使っての範囲で動的に制御する事が出来ます。

iframe Player APIやJavaScriprの知識が必要になりますので、ご希望の場合は、当社へご依頼ください。

基本的には、JavaScriptで指定する処理や条件判定+以下の埋め込み動画の制御範囲で指定する動画制御が可能です。

 

例えば次の様な事が出来ます

 

  • 特定の位置までスクロールされたら、動画を再生する又は停止する
  • ページにアクセスして数秒したら、動画再生を開始する又は停止する
  • 動画が終了したら動画表示をフェードアウトする
  • 動画が終了したら別のページにリダイレクトする

埋め込み動画の利用目的と使い方

Webサイトで埋め込み動画を使用する目的としては大きく2つに分かれます。

また、その再生方法や表示方法などは、YouTube iframe APIの提供する仕様の範囲内でカスタマイズが出来ます。

特にデザイナー様、ディレクター様は以下を理解した上でお客様に提案してください。

視覚効果を目的とした使い方

映画の公式サイトなどで良く使われる使い方で、Webサイトの背景として画面前面で動画再生する方法です。動画の内容を見て欲しいというよりも、Webサイトの視覚効果を目的とします。

この場合は、画面幅によって可変させる為、より大きな解像度の動画を利用すると良いでしょう。せめてフルHD(1920×1080ピクセル)以上で、4K(3840×2160ピクセル)だとより美しく表現出来ます。

基本的には自動再生で再生し、音声はミュートを設定する事がマナーです。音声をONにする為の部品をどこかに設置すると良いでしょう。

動画視聴を目的とした使い方

自社製品やサービスの説明動画、社員の教育マニュアル、オンライン授業など訪問ユーザーに内容自体を視聴させる目的の埋め込み動画です。視覚効果を目的とした場合とは違って、ユーザーに再生ボタンをクリック(タップ)させて再生する方法が一般的です。

動画の再生位置・方法

動画の再生位置や再生方法について、ご希望をお知らせください。以下はよく利用される手法です。少なくとも、提示している手法は実装する事が可能です。これ以外にもアイデアがございましたら、そのアイデアについて事前にご相談ください。

サムネイル表示位置で再生する

サムネイル画像の表示位置で、同じサイズで再生を開始します。サムネイル画像が小さいと、そのサイズ内で再生されるので特にPCやタブレットで視聴するユーザーに取っては「小さくて見辛い」という事があります。従ってデザイン上、小さいサムネイルの場合には推奨される手法ではございません。

 

再生専用ページを開く

設置した画像やテキストリンクを設置して、その動画の再生専用ページを別タブで開きます。サイト内の複数ページから、特定の動画を紹介する場合に有効な手法です。予算面では、その再生専用ページ用のコーデンィグ、デザインが必要なので「サムネイル表示位置で再生する」場合よりも高い見積となります。また、CMSで投稿するページの場合も、その動画の再生専用ページを管理する仕組みの追加等の費用が必要となります。

 

モーダル表示する

設置した画像やテキストリンクを設置して、その動画をモーダル表示して再生します。モーダル表示は、そのページ上に被せて動画を大きなサイズで表示・再生が出来る為、ユーザーに取って見やすい手法です。またページ遷移をしないので、離脱する事も防げます。被せられた動画は、クローズボタンで閉じる事が出来ます。また、動画が終了したら自動的に動画を閉じるというアクションを加える事も可能です。予算面では、専用のJavaScriptの処理を制作する必要がある為、「サムネイル表示位置で再生する」場合よりも高い見積となります。CMSで投稿するページの場合は、その動画のIDを登録するフォームの追加、登録されたIDをJavaScriptに渡す為の処理等の費用が必要となります。

 

スライド上で再生する

WebサイトTOPのファーストビューによく使われるスライド上で再生する事も出来ます。画像と混在して動画を含めるという事も出来ます。また、複数動画をスライドにしてユーザーがスライドで選んで、視聴したい動画を再生するという事も出来ます。但し、スライドを自動スライドにする場合は、動画再生中はスライドを停止するという処理が必要だったり、動画を自動再生して1つの動画が終了したら次のスライドに移動させたい場合など、希望の仕様によって費用が異なります。

 

(番外編) リンクでYouTubeのページを開く(埋め込み動画ではない)

画像やテキストにリンクを設置してYouTubeのページを開くという最も簡単で予算も低い手法ですが、最もユーザーの離脱を招きやすい手法です。遷移先はYouTubeのページなので、余計な関連動画も表示され、そちらに興味を持たれてしまい、そのまま離脱という事になる可能性が高くなります。

 

動画サムネイル

サムネイルとは、動画の内容を伝える為の静止画で、動画の「表示」の様なものです。上記の手法によっては必要無い場合もございますが、動画とセットで用意するのが一般的です。

 

基本的にはYouTubeで自動生成されたサムネイルが表示されます

YouTubeでは動画をアップロードすると自動でサムネイル画像が生成されて、特に指定しなければそのサムネイル画像が表示されます。但し、動画アップロード直後はサムネイルが作成されていなかったり、特定のサイズが作成されていない等り理由で、準備中の画像(グレーに白丸が並んだ画像)が表示されてしまい場合がございます。また、サムネイル画像は自動生成の為、おおよそ最初のシーンのスクリーンショットがサムネイルとして生成されます。

 

自前で用意したサムネイルを表示したい

YouTube側でカスタムサムネイルという機能があり、これを設定すると独自のサムネイル画像が設定されます。詳しくはこちらをご覧ください。

 

Webサイト側でサムネイルを設定したい

カスタムサムネイルを使わないで、Webサイト側でサムネイルを設定する事も可能です。仕組みとしては、動画の上にサムネイルを被せて表示し、クリックされたら動画再生と同時に被せたサムネイル画像をフェードアウトさせます。この方法を使う事で、動画の登録アカウントを持たない場合や、サムネイルを直ぐに反映させたい(カスタムサムネイルは変更まで時間が掛かる場合がある)場合に有効な手段です。但し、上記2方法とは別の処理を加える為、その為の費用が必要となります。

 

埋め込み動画の制御範囲

YouTubeの埋め込み動画に対しては、次の制御が可能です。

YouTubeの埋め込み動画を利用するコンテンツをご依頼される場合は、以下の範囲から希望の動画制御をお知らせください。

特に希望されない場合は、初期設定値で設定します。

 

オプション説明と選択肢
自動再生 動画を自動で再生されるか、再生させないか(再生はコントロールバーの再生ボタンをクリックで再生)の指定します。
 
(初期設定値) 自動再生しない
音声の初期設定 音声の初期設定をミュートにするか、しないかの指定をします。自動再生させる指定では、突然音が鳴ってしまうのでミュートに指定するのがマナーです。
 
(初期設定値) 自動再生する場合はミュート、自動再生しない場合は特に指定しない
開始位置と終了位置の指定 動画の開始位置と終了位置を秒単位で指定します。
 
(初期設定値) 指定しない
関連動画の指定 動画終了後に表示される関連動画を自チャンネルに限定するか、しないかの指定をします。
関連動画を自チャンネル以外にするとお客様の競合企業や、意図しない動画が表示されてしまいますので、基本的には「自チャンネルに限定」を指定します。関連動画の非表示は、2018年9月移行できなくなりました。
 
(初期設定値) 自チャンネルに限定
終了時に他の動画を自動再生 動画終了後に他の動画を自動で再生する事が出来ます。その他の動画は、指定する事が出来て複数指定も可能です。
 
(初期設定値) 指定しない
コントロール(操作機能)を非表示 再生ボタンや進行状況などのコントロールを非表示にします。自動再生をオフにしてコントロールを非表示にした場合は、動画クリック(タップ)で動画再生、再度クリック(タップ)で停止されます。オンマウス時の「動画タイトル」「後で見る」「共有」「YouTubeのロゴ」は非表示には出来ません。
 
(初期設定値) 非表示に設定する
全画面表示ボタンの非表示 コントロールから、全画面表示する為のボタンを非表示にする事が出来ます。
 
(初期設定値) 指定しない
ループ再生の指定 動画を繰り返し再生させる(ループ再生)指定を出来ます。また、再生リストをループ再生させる事も出来ます。
 
(初期設定値) イメージ動画の場合はループ再生、それ以外は指定しない
キーボード操作の無効化 キーボードでの操作を無効化する指定が出来ます。
 
(初期設定値) 指定しない
字幕の表示 字幕の表示を初期設定で有効にする事が出来ます。但し、字幕が設定されている場合に限ります。
 
(初期設定値) 指定しない
字幕の言語を指定 字幕の言語の初期設定を指定する事が出来ます。但し、字幕が設定されている場合に限ります。
 
(初期設定値) 指定しない

YouTube で使えるAPI

Googleの有料サービスとなりますが、YouTubeにアップロードした動画を活用して様々な企業活動に役立つ事が出来るAPIも用意されています。

このAPIは、YouTubeが収集した動画や視聴者のデータの提供や分析、動画管理を行う為のAPIの提供となります。つまり、複数チャンネルを運営していたり多数の動画コンテンツを公開して営業活動を行う企業・団体が利用するAPIで、一般的な企業・団体での利用はあまり考えられないAPIです。

主に次の3つのAPIが用意されています。

YouTube Data API

YouTube Data APIでは、動画やチャンネルのメタデータや統計情報を取得する事が出来ます。

Webサイトで言うところのアクセスログの様なログ情報が取得できて、統計分析を行う事が出来ます。

具体的には次の情報が取得できます。

 

  • 特定動画の情報取得(タイトル等の動画メタデータや、視聴回数等の統計情報の取得)
  • チャンネル情報の取得(チャンネルのメタデータ及び登録者数等の統計情報の取得)
  • プレイリスト情報
  • コメント情報
  • 検索結果
  • ライブ放送情報
  • 字幕情報
  • 地域制限情報
  • 所有権情報

YouTube Analytics API

YouTube Analytics APIでは、動画やチヤンネルの視聴者の行動を取得する事が出来ます。

YouTube Data APIよりも、もっと詳細な視聴者情報や経路情報、収益情報などのデータ取得が出来ます。これらの情報は YouTubeアナリティクスで見れる内容ですので、独自の分析システム等を開発したい場合などに利用するAPIです。

具体的には次の情報が取得できます。

 

  • ビュー数、動画が視聴された総時間、いいね数、嫌い数、コメント数、共有数などビューとエンゲージメントのデータ
  • 視聴者の年齢層、性別分布、国や地域のデータ
  • 視聴者が動画にアクセスした経路
  • 視聴に使用されたデバイスタイプとOS
  • 動画やチャンネルからの推定総収益と、広告、YouTubeプレミアム、チャンネルメンバーシップ、スーパーチャットなどからの収益
  • エンドスクリーンを通じてのクリック数やエンゲージメント
  • 動画内で表示されるカードのクリック数

YouTube Reporting API

YouTubeアナリティクスのレポートデータを取得できます。

24時間単位のデータを集計したレポートを取得したり、特定のレポートを定期的に取得する様に設定し、そのレポートデータを自動化する事が出来ます。

取得したレポートデータを、Excelなどにインポートして、より詳細なデータ分析をする事が出来たり、独自の分析システムで活用する事が出来ます。

HTML Snippets Powered By : XYZScripts.com