COOSY BLOG
  • HOMEホーム

  • SERVICEサービス

    • サービスTOP
    • Web制作
    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
  • WORK制作実績

    • 制作実績TOP
    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーション
    • サービスサイト・SaaS
    • システム開発
  • ABOUTクーシーについて

    • クーシーについて
    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ岩手
    • ロンドン支社
    • ミャンマー支店
  • BLOGブログ

  • RECRUITリクルート

  • Contactお問い合わせ

BLOG MENU

  • BLOGトップ
  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加

Youtube動画を埋め込む方法!知っておきたいカスタマイズ16選

  • Web制作ハウツー
  • システム開発
  • 撮影・動画編集
  • プログラミング
Youtube動画を埋め込む方法!知っておきたいカスタマイズ16選

Webサイト制作で、メインビジュアルやプロモーションビデオなどの掲載に、YouTubeを使うことがあります。

その時、「動画再生開始時間を指定したい」「ループして動画を再生したい」など単純に動画を流すだけではなく、カスタマイズを行って、より近いイメージに変更できればと思うケースがありますよね。そんなカスタマイズが行える「IFrame Player API」の使い方について、ご紹介します。

本記事は、このAPIを使って何ができるのかを重点に置いた、Webサイト制作者全般に向けた記事です。

APIは、iframeタグを使ってYouTube動画プレーヤーを設置、JavaScriptでプレーヤーを制御できるのです。APIを使うことで、主に下記の調整が可能になります。

  • 再生コンテンツ指定
  • 字幕設定
  • 動画プレーヤーのコントロール設定
  • キーボード操作を有効・無効
  • 音量調整
  • 再生開始・停止時間の指定

また動画プレーヤーは、少なくとも 幅480ピクセル、高さ270ピクセルのアスペクト比16:9の動画プレーヤーが推奨されています。

動画プレーヤーの設置とカスタマイズ方法

設置方法

動画プレーヤーの設置は非常にシンプルです。iframeタグを設置して、URLを指定するだけで実装可能です。

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?start=30&controls=0" frameborder="0"></iframe>

カスタマイズで使うパラメータ

「?」以降の記述は、パラメータと呼ばれています。URLの「controls =0」は、プレーヤーのコントロールを非表示にして、「start=30」は、再生開始時間を指定した記述になります。「〇〇〇=〇」のように指定することで、指定した機能を適用できます。また「&」で区切ることで、複数の機能を適用できます。

再生する動画を指定する方法

特定の動画や再生リストなど、どんな動画を再生するか指定することができます。iframeに指定するパラメータを含んだURLを変更することで、特定の動画や再生リストなどのコンテンツ指定ができます。

特定の動画を再生したい

iframeタグに指定するURL
https://www.youtube.com/embed/[YouTube動画ID]

YouTube動画IDは、動画ページのアドレスの「v=」以降の部分がIDになります。下記URL例のIDは「M7lc1UVf-VE」。
(例)https://www.youtube.com/watch?v=M7lc1UVf-VE

再生リストを再生したい

iframeタグに指定するURL
https://www.youtube.com/embed?listType=playlist&list=[YouTube 再生リスト ID]

YouTube再生リストIDは、再生リストページのアドレスの「list=」以降の部分がIDになります。
(例)
https://www.youtube.com/playlist?list=PLOU2XLYxmsIJh1bR7bH5XXUCogb88sRP3
IDは「PLOU2XLYxmsIJh1bR7bH5XXUCogb88sRP3」。

ユーザーのアップロード動画を再生したい

iframeタグに指定するURL
https://www.youtube.com/embed?listType=user_uploads&list=[YouTube ユーザー名]

YouTube ユーザー名は、Googleアカウントの名前になります。

特定の検索結果を再生したい

iframeタグに指定するURL
https://www.youtube.com/embed?listType=search&list=[検索キーワード]

検索キーワードは、「YouTube Developers Live」で検索結果を再生する場合、
「list=YouTube+Developers+Live」と入力します。

再生リストの読み込みの一例

src属性のURLを変更することで、再生リストが読み込まれます。

<iframe id="player" type="text/html" width="640" height="360" src=" https://www.youtube.com/embed?listType=playlist&list=[YouTube 再生リスト ID]" frameborder="0"></iframe>

パラメータでできるカスタマイズ方法

再生コンテンツ指定の他にも、色々な機能がありますので、ピックアップしてご紹介します。

字幕を表示する

デフォルトの言語を指定 : cc_lang_pref

動画の視聴者が、日本人がメインの場合、cc_lang_prefでデフォルトを日本語にしておくのが推奨です。jaが日本語で、enが英語になります。その他の言語については、こちら(http://www.loc.gov/standards/iso639-2/php/code_list.php)の ISO 639-1 Codeの2文字を指定することで設定できます。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?cc_lang_pref=ja" frameborder="0"></iframe>

デフォルトの字幕を表示・非表示 : cc_load_policy

映像をメインで表現したい動画は、cc_load_policyで字幕を非表示にできます。1が字幕を表示で、0が非表示になります。デフォルト値はユーザー設定に依存します。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?cc_load_policy =0" frameborder="0"></iframe>

動画プレーヤーのコントロールを設定する

コントロールを表示・非表示 : controls

コントロールとは、動画の上にカーソルを乗せた時、シークバーや再生ボタンを操作できるユーザーインターフェースのことです。ユーザー操作が不必要なメインビジュアルで使う場合は、controlsでコントロールを非表示にします。

1がコントロールを表示で、0が非表示になります。デフォルト値は1です。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?controls=0" frameborder="0"></iframe>

コントロールの全画面表示ボタンを表示・非表示 : fs

コントロールは必要だけど、あくまでWebサイトのパーツとして扱うため、全画面表示が必要のない場合は、非表示にします。
1が全画面表示ボタンを表示で、0が非表示になります。デフォルト値は1。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?fs=0" frameborder="0"></iframe>

キーボード操作を設定する

キーボード操作を有効・無効 : disablekb

特殊な案件で、キーボード操作を行われたくない場合は、disablekbでキーボード操作を無効にできます。
1がキーボード操作を無効で、0が有効になります。デフォルト値は0。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?disablekb=1" frameborder="0"></iframe>

音量を設定する

ミュートの指定 : mute

自動再生は、ミュートにしていないと動かないケースがあるため、自動再生を行う際は、ミュート有効が推奨です。ミュートの有効・無効はmuteで指定できます。
1がミュートを有効で、0が無効になります。デフォルト値は0。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?mute=1" frameborder="0"></iframe>

再生設定

任意の動画を複数再生: playlist

playlistでYouTube動画IDを任意で複数指定して、動画を複数再生できます。複数指定する場合、カンマ区切りでIDを指定します。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed?playlist=M7lc1UVf-VE,PkZNo7MFNFg" frameborder="0"></iframe>

自動再生の指定 : autoplay

ページへアクセスしたとき、動画を再生しておきたい場合は、autoplayで自動再生を有効にします。
1が自動再生を有効で、0が無効になります。デフォルト値は0。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1" frameborder="0"></iframe>

再生開始時間を指定する : start

動画の途中で、初めに見せたい内容がある場合、startで再生開始時間を指定します。指定した秒数から再生されます。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?start=30" frameborder="0"></iframe>

再生停止時間を指定する : end

動画の一部をユーザーに見てもらう場合に、endで再生停止時間を指定します。指定した秒数で停止します。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?end=45" frameborder="0"></iframe>

動画再生のループを有効・無効 : loop

メインビジュアルなどで、動画を繰り返し再生させておきたい場合は、ループを有効にします。
以前は、loopのみで動作しましたが、2021年1月現在、loopを動作させるには、playlistと一緒に指定する必要があります。1がループを有効で、0が無効になります。再生リストの場合、全体の再生の後、最初の動画を再生します。デフォルト値は0です。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?loop=1&playlist=M7lc1UVf-VE" frameborder="0"></iframe>

関連動画の設定

動画終了時の関連動画の指定 : rel

動画終了時に、同チャンネルの動画を告知したい場合は、「0」にします。
1が他チャンネルを含めた関連動画で、0が同チャンネルの関連動画になります。デフォルト値は1です。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?rel=0" frameborder="0"></iframe>

※以前は、関連動画を非表示にすることができましたが、YouTubeの仕様変更により、関連動画を非表示することができなくなりました。

再生開始・停止時間を指定した特定の動画再生の一例

パラメータを記述することで、指定した機能が適用されます。
startで、再生開始時間の指定を行い、
endで、再生停止時間の指定を行っています。

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?start=30&end=60" frameborder="0"></iframe>

自動再生しない場合の解決方法

自動再生を有効にしていても、動かないケースがあります。
それは多くのウェブブラウザが、ポリシーによって「音声ありで自動再生できない」ためです。
解決策は、デフォルトの音量設定をミュートにすることです。
自動再生を行うときのパラメータは、「autoplay=1&mute=1」とセットで設置するようにしましょう。

JavaScriptを使ったプレイヤーの制御

設置したプレイヤーを制御する場合は、JavaScriptを使います。
実装方法は、JavaScriptの知識が必要になり、公式リファレンス(https://developers.google.com/youtube/iframe_api_reference?hl=ja)を読み解く必要があるため割愛させていただき、「JavaScriptで実装する利点」「プレーヤーを制御してできること」に焦点を絞って、ご紹介させていただきます。

JavaScriptで実装する利点

設置したプレイヤーの操作が行えます。
例えば、自前のボタンを押すことで、前後のプレイリストを再生する、音量を上下するといったことが可能になります。
またプレーヤーの読み込みが完了したときや、再生や停止などのタイミングを検知できるため、何らかの処理をYouTubeと連携して組み込むこともできます。

プレーヤーを制御してできること

ユーザーアクションが起こったときや特定のタイミングで、主に下記の操作が可能になります。

  • 動画の読み込みと再生
  • 再生開始・停止時間の指定
  • 画質設定
  • 動画の再生・一時停止・停止
  • 再生リスト内の「次」「前」の動画を再生
  • 再生リスト内の動画を指定して再生
  • プレーヤーの音量をミュートに変更・解除
  • 音量を0~100で設定
  • 再生速度の倍率を設定
  • ループの有効・無効
  • 再生リストをシャッフル再生
  • プレーヤーのサイズ設定
  • 再生、停止中などの再生ステータスを取得
  • 再生画質の設定を取得
  • 再生時間やURLなどの動画情報を取得
  • プレーヤーの読み込み完了や再生、停止などの状態を検知

まとめ

APIを使うときは、はじめにJavaScriptの記述が必要なのか、ご確認ください。
ユーザーアクションや特定のタイミングでプレーヤーの制御が必要ない場合は、iframeタグを使ってYouTube動画プレーヤーの設置のみで実装ができます。
逆に、プレーヤーの制御も必要な場合は、JavaScriptでプレーヤーの制御が必要になります。
要件によって、どこまで必要なのか取捨選択していただき、組み込んでいただければと思います。

APIを使って何ができるのかに焦点を置いてご紹介させていただきましたが、さらに詳細に調べる方は、公式リファレンス(https://developers.google.com/youtube/iframe_api_reference?hl=ja)をご参照ください。YouTubeを使う機会も多くなっていますので、よりよいWebサイト構築のご助力になればと思います。


ドローンのふかん撮影とスチール撮影の関係性。撮る「高さ」を考える

クーシーブログ編集部

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

2021/02/03

安田

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
お問い合わせはこちら

撮影・動画編集・プログラミングの関連記事はこちら

  • Laravel 11から12への変更点とアップデート方法【注目の新機能まとめ!】

    Web制作会社クーシーが、Laravel 12の変更点とアップデート方法をわかりやすく解説! パフォーマンス向上やセキュリティ強化、開発体験を向上させる新機能もご紹介します。

    • プログラミング
  • Astro.jsとは? 高速・軽量の新世代フレームワークをWeb制作会社が詳しく解説

    Webサイトの表示速度にお悩みですか? 高速・軽量な次世代フレームワーク「Astro.js」が解決の鍵になるかもしれません。特徴やメリットなど、Web制作会社のクーシーがわかりやすく解説します。

    • プログラミング
  • 【はじめてのPHP】初心者向けに特徴と使い方をやさしく解説

    PHPは、Web開発で重要な役割を果たすプログラミング言語です。身近なところではWordPressに使われています。

    • プログラミング
  • 【DockerでReactの環境構築】エンジニア1年生と学ぶコンテナ構築までの手順

    Dockerでの環境構築は慣れていない人にはやや複雑です。本記事では画像つきで、初心者でもできるようにわかりやすく解説します。

    • プログラミング
  • 【図解】APIとは?メリットや連携事例をわかりやすく解説

    APIはアプリやサービス同士をプログラムでつなぐ仕組みのことです。この記事ではメリットや連携事例をわかりやすく説明しています。

    • プログラミング
  • ドローンのふかん撮影とスチール撮影の関係性。撮る「高さ」を考える

    近年、Webサイトに欠くことができない「動画」。1枚の画像で情報を伝えるスチールと異なり、情報量を多角的に盛り込むことができるのは動画の強みで、中でもドローンを使った空撮映像は、ハッと人の眼を惹き付けることができるため引き合いも多いです。

    • 撮影・動画編集
  • 物撮りのプロに依頼!ECサイトの商品撮影依頼時の8つのポイント

    ECサイトを筆頭に、「商品」を手掛けている会社であれば欠かせない商品カット。今回は、物撮りをメインに手掛けるプロフォトグラファーへ取材を敢行してみました。

    • ECサイト
    • 撮影・動画編集
  • ポートレート写真撮影に最適なレンズの焦点距離を考察する

    人物写真はどんなWebサイトにも欠かせない定番の画像素材です。今回は、人物写真における焦点距離の違いによる表現の差、個人的に多用する35mmと135mmの魅力などをお伝えしてきます。

    • 撮影・動画編集

COOSYの
制作実績

UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。

制作実績を見る

Web制作の課題はクーシーが解決します

  • 動画制作

    ブランディングを強化する戦略的な動画を制作。YouTube等の動画SEOも意識し、心に響く映像を企画・制作します。

  • Webプロモーション

    LP制作で商品の魅力を伝え、広告運用で集客を最大化。SEO・AIOとデザインを連携し、宣伝効果を高めます。

  • ブランディング

    競合と差別化し顧客に選ばれる価値を創造。WebサイトのSEO・AIOからCIまで、一貫したデザイン戦略を行います。

CATEGORY LIST

  • すべての記事一覧

  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット
  • WORKS

    Webサイト・アプリなどの
    様々な実例・制作実績のご紹介

    WORKS
  • CONTACT CONTACT

    Webサイトのご相談、お見積もりはこちらから

    Webサイトのご相談、お見積もりなど
    お気軽にお問い合わせください

ホーム

  • TOP
  • COOSY BLOG
  • Youtube動画を埋め込む方法!知っておきたいカスタマイズ16選
ページトップへ
  • TOP
  • SERVICE

    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
    • Web制作
  • WORKS

    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーションサイト
    • サービスサイト
    • システム開発
  • ABOUT

    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ 岩手
    • ロンドン支社
    • ミャンマー支店
  • RECRUIT

    • ディレクション部
    • デザイン部
    • システム開発部
    • アカウント・プランニング部
    • Webマーケティング事業部
    • 人事・総務部
    • オフショア
    • グローバル事業部
  • BLOG

    • 目的別
    • Web制作ハウツー
    • システム開発
    • Webサイト運用のコツ
    • Webマーケティング
    • 特集

COOSY SNS

  • facebook
  • X
  • お問い合わせ
  • Privacy policy
  • Site Policy
  • Security Policy
© COOSY All Rights Reserved.