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

プログラミング

SharePoint REST APIを使用してリストの情報を取得し、headerにナビを作る

SharePointで作成したリストの情報をREST APIを使用して取得してみましょう。今回は、APIで取得した情報を、headerにリンクとして差し込んでみます。サイト全体共通のナビでも、リストを使用すると、一か所で管理できるので便利です。目次1 前提条件2 1.REST APIで情報を取得2.1 REST APIのURL2.2 データを取得する処理3 2.取得した情報をheaderに表示前提条件 SharePoint Online モダンUI カスタムJSが使用で […]

2025年3月26日

WordPress

WordPressで権限やユーザーごとに管理画面のサイドメニュー表示を切り分ける

デフォルトだといろいろな項目が表示されているWordPressの管理画面のサイドメニュー。慣れていない人にはわかりづらいですよね。また、権限によってデフォルトで非表示にしてくれたりもしますが、この部分は見せたくないな…ということも多いと思います。今回はWordPressで権限やユーザーごとにサイドメニューの表示を変更する方法をご紹介します。目次1 権限の種類について2 function.phpに記述する2.1 サイドメニューの非表示用のコード2.2 権限ごとに振り分け […]

2025年3月26日

プログラミング

jQuery+PHPで大容量ファイルを分割アップロードするお話

ファイルのアップロードを行う際に注意しないといけないのが「アップロード容量」と「タイムアウト」です。どちらもサーバーの設定に関わるところでレンタルサーバーでは対処しきれないところもあり、大容量にするとそれだけアップロードに時間がかかりタイムアウトが発生しやすくなります。そこでフロント側で分割してファイルをアップし、バックエンド側で受け取った後に結合するようにするとよいでしょう注意すべき点として通常のPOSTでの送信ではないため、あらかじめそこら辺を考慮した処理が必要とな […]

2025年2月20日

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

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

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

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

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