2017年10月25日

工藤

YouTubeの埋め込み動画をYouTube Player APIでコントロールしよう！

マークアップ

facebook
twitter

こんにちは、工藤です。
今回はYouTubeの埋め込み動画をjsでコントロールする方法をご紹介します。
例えば埋め込みの際に『自動再生にした時にミュートにしたい』なんて場合はただ埋め込みではできないのでこちらの方法で実現させます。

1 IFrame Player APIを読み込ませよう
2 youtubeにアップした動画を表示させる
3 ちなみに

IFrame Player APIを読み込ませよう

まずjsを読み込みます。

以下は直接htmlの方に記述できる方法

<script src="https://www.youtube.com/iframe_api"></script>

1	<script src="https://www.youtube.com/iframe_api"></script>

またはjsの方で読み込ませる方法もあります。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";　// IFrame Player API を読み込む
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";　// IFrame Player API を読み込む

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

お好みの方でどうぞ。

youtubeにアップした動画を表示させる

次にyoutubeの動画を表示させる領域をhtmlに記述します。
適当なIDを振っておいてください。

<div id="movieArea"></div>

1	<div id="movieArea"></div>

そしてカスタマイズ内容を記述します。
パラメータの指定内容についてはコメントを振ってある通りです。

var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('movieArea', { //ここに表示させる領域のIDを記述する
          height: '360', //動画の高さ指定
          width: '640', //動画の幅指定
          videoId: 'QulTvgUvuJ0', //youtubeにアップした動画のID指定
          events: {
            'onReady': onPlayerReady //プレイ準備完了時の動作
          },
          //ここからカスタマイズ
          playerVars: {
                    rel: 0, //最初の動画の再生が終了（または停止）したときに、プレーヤーに関連動画を表示するかどうか　0:表示しない 1:表示する　デフォルトは1   
                    playlist: '6Y3bRMwBCP4', //次に流すyoutubeにアップした動画のID指定
                    loop: 1, //ループをするかどうか　0:ループしない 1:ループをする　デフォルトは0         
                    controls: 1, //コントローラーを表示させるか　0:コントローラー無し 1:コントローラー有り　デフォルトは1
                    autoplay: 1, //オートで再生させるか　0:オートで再生させない　1：オートで再生する　デフォルトは0
                    showinfo: 0 //上部の動画タイトルを表示について　0：タイトルを表示させない　1：タイトルを表示させる　デフォルトは1
                }
        });
      }
//プレイ準備完了時の動作
      function onPlayerReady(event) {
        event.target.playVideo();　// 動画再生
        event.target.mute();　// ミュートにする
}

var player;

function onYouTubeIframeAPIReady() {

player = new YT.Player('movieArea', { //ここに表示させる領域のIDを記述する

height: '360', //動画の高さ指定

width: '640', //動画の幅指定

videoId: 'QulTvgUvuJ0', //youtubeにアップした動画のID指定

events: {

'onReady': onPlayerReady //プレイ準備完了時の動作

//ここからカスタマイズ

playerVars: {

rel: 0, //最初の動画の再生が終了（または停止）したときに、プレーヤーに関連動画を表示するかどうか　0:表示しない 1:表示する　デフォルトは1

playlist: '6Y3bRMwBCP4', //次に流すyoutubeにアップした動画のID指定

loop: 1, //ループをするかどうか　0:ループしない 1:ループをする　デフォルトは0

controls: 1, //コントローラーを表示させるか　0:コントローラー無し 1:コントローラー有り　デフォルトは1

autoplay: 1, //オートで再生させるか　0:オートで再生させない　1：オートで再生する　デフォルトは0

showinfo: 0 //上部の動画タイトルを表示について　0：タイトルを表示させない　1：タイトルを表示させる　デフォルトは1

}

});

}

//プレイ準備完了時の動作

function onPlayerReady(event) {

event.target.playVideo();　// 動画再生

event.target.mute();　// ミュートにする

}

DEMO

※動画はオートで再生されますが、音はミュートにしています。

今回は

高さを360px
幅を640px
動画ID『QulTvgUvuJ0』を表示

のような指定にしています。
ちなみに高さと幅はcssでも調整可能です。
動画のIDについてはURLにそれっぽいのがあるのでそちらを取ってきます。

次にパラメータ等に

関連動画を表示させない
次に再生させる動画
コントローラーを表示させる
オートプレイにする
タイトルを表示させない
動画準備後、音はデフォルトでミュートにしておく

と指定しています。

やり方がわかると結構簡単にできます。

あとは公式にもその他のオプション等が用意されているのでそちらも確認してみてください。

ちなみに

今回サンプルで使用した『かわいいタイマー』ですが、先日弊社からリリースされたものです。
タイマーを使いながらかわいいうさぎに癒される優れモノ。現在はiOSアプリのみですがAndroid版も開発中です。
よかったら使ってみていただけると大変うれしいです。

かわいいタイマー

AppStore

他のサービスも。

ノミトモ

Grmo

COLORBOX

執筆者：工藤[ WEBデザイナー ]

WEBデザイナー。最近はWordPressを触るのが好きです。よろしくお願いします。

マークアップ

WEBサイトのアクセシビリティ対応をしてみよう！【ダイアログ（モーダルウィンドウ）編】

以前公開した WEBサイトのアクセシビリティ対応では、全体的な考え方について触れました。今回はその中でも利用頻度の高いダイアログ（モーダルウィンドウ）に焦点を当てて解説します。ダイアログは、入力フォームの送信確認や画像の拡大表示など、Webサイトでよく利用される便利な仕組みです。しかし、アクセシビリティ対応が不十分なまま実装されるケースも少なくありません。特にキーボードだけで操作するユーザーや、スクリーンリーダーを利用するユーザーにとっては、誤ったダイアログの実装が操 […]

2025年7月28日

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい！けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか？弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。今回は、実際にどんなアンケートフォームが作成できるかご紹介します。目次1 Easy Form Makerって？2 イベントなどのフィードバックア […]

2025年5月30日

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか？弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します！目次1 Event Calendar […]

2025年5月29日

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト