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

プログラミング

【phpdotenv】PHPで環境変数を取り扱うお話

PHPでサーバーの環境ごとに設定ファイルを用意する場合、config.phpなどのファイルにデータベースの接続情報やAPIのキーなどをdefineで登録すると思います。これは昔からある一般的なやり方ですが、例えば「ローカル環境やテスト環境と本番環境で情報を出し分けたい」「GitHubやSubversionなどに接続情報を管理されたくない」ということがあるかと思います。 Linuxの場合は「.env」でユーザーごとの情報をあらかじめ設定することが可能ですが、PHPだとデフォル […]

2024年4月18日

Webサービス

【CAPTCHA系】reCAPTCHAの代替サービスを紹介するお話

みなさん、reCAPTCHAを使ってますか？ CAPTCHAと呼ばれる機能は問い合わせフォームやログインフォームなどいわゆるbot系対策として有効で、その中でもreCAPTCHAは無料かつ簡単に導入できるたため、様々な場所で使われてます。目次1 2024年4月から実質有料化？2 他にないのだろうか？3 アカウントを作る4 PHPでの実装5 最後に 2024年4月から実質有料化？しかし、2024年4月から今まで100万リクエストまで無料だったのが、1アカウント合計1万リクエ […]

2024年4月18日

Webサイト制作

Webアクセシビリティの基本を学ぼう！

近年Webサイト制作時に求められる『Webアクセシビリティ』。正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。一緒にWebアクセシビリティについて学んでいきましょう。目次1 そもそもWebアクセシビリティってなに？2 基本的な対応内容2.1 色のコントラストをはっきりさせよう2.2 文字サイズを変更できるようにしよう2.3 できるだけテキストベースを心 […]

2024年4月3日

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

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

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

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

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