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を触るのが好きです。よろしくお願いします。

マークアップ

コーポレートサイトのアクセシビリティ、どこまで対応すべき？

コーポレートサイトにおける。重要だと分かっていても、コーポレートサイトにどこまで反映すべきかは悩みどころではないですか？今回は、現実的に取り組みやすい部分と、対応が難しい部分を整理してご紹介します。一概にこれが正解、というわけではありませんが、悩んでいる方の参考になればと思います。目次1 コーポレートサイトでの達成基準は？2 比較的対応しやすい部分2.1 画像に代替テキストを設定する2.2 見出し構造の整理（h1～h6の適切な使用）をする2.3 色や形だけに依存しない […]

2025年9月16日

Webサイト制作

はじめてのShraePoint 実践的活用事例3選【業務効率化・DX】

目次1 SharePointとは？1.1 高い機密性が特長2 SharePointの活用法2.1 1.社内マニュアルや手順書を整備する2.2 2.営業資料や契約書の保管と共有に活用する2.3 3.情報の回覧やアンケート、意見収集の場として活用3 SharePointで作成したポータルサイト4 まとめ5 8bit公式 YouTube Channelのご紹介 SharePointとは？ SharePointはMicrosoftが提供する情報共有サービスです。WordやExcel、 […]

2025年9月10日

Webデザイン

【Premiere Pro】動画素材の音声を自動で文字起こしする方法

Premiere Proの機能を使って、動画素材の音声を自動で文字起こししてみましょう。起こしたテキストは、発話タイミングに合わせて字幕として表示することもできます。とても簡単にできるので、ぜひ試してみてください。目次1 自動文字起こし機能の使い方1.1 1.テキストパネルから文字起こしを行う1.2 2.文字スタイルの変更2 8bit公式 YouTube Channelのご紹介自動文字起こし機能の使い方 1.テキストパネルから文字起こしを行う音声データを含んだ動画をタイ […]

2025年9月10日

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

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

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

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

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