youtube動画をカスタムしよう

ディレクターののもとです。
今回は趣向を変えてというか、業務で試したので、youtube の埋め込み動画を色々と雰囲気を変えてみるというのを紹介します。

基本的には色々なサイトでやり方などを記載してあると思いますが、
このサイトのように
http://www.maisonbookgirl.com/cotoeri/
再生ボタンと再生中に暗転するようなカスタムすることを目指します。

公式で情報を参考に

基本的には公式の情報を参考にします。
https://developers.google.com/youtube/iframe_api_reference?hl=ja
HTMLでは、プレイヤーが表示するためのエリアを用意しておいて、JSでコントロールします。
再生ボタン自体を普通にカスタムすることは出来ないため、参考サイトのようにするには、埋め込み動画とは別の要素をクリックしたら動画が再生するという仕組みを取ります。

まずは簡単なサンプル

サンプルHTMLはこちら。
#youtubeへiframeが置き換わります。
#playを押すと再生するという流れです。
デモ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Youtube</title>
</head>

<body>
  <div id="youtube"></div>
  <a href="#" id="play">再生する</a>
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
  <script src="youtube.js"></script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Youtube</title>

</head>

<body>

</body>

</html>

JSはこんな感じです。
ほぼ、公式のままですが。jqueryを使って、ボタンの制御をしています。
これはボタンを押したら再生するという簡単なサンプルです。
これをベースにもう少し手を加えてみます。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytArea = 'youtube'; //動画が入ってくるHTML上のid
var ytID = 'ox8WVRnb8GA'; //動画のID
var ytWidth = 640; //幅
var ytHeight = 390; //高さ

function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		height: ytHeight,
		width: ytWidth,
		videoId: ytID
	});
}

$(function() {
  //#playを押したら再生する
  $("#play").on("click", function(){
    ytPlayer.playVideo();
  });

});

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

tag.src = "https://www.youtube.com/iframe_api";

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

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytArea = 'youtube'; //動画が入ってくるHTML上のid

var ytID = 'ox8WVRnb8GA'; //動画のID

var ytWidth = 640; //幅

var ytHeight = 390; //高さ

function onYouTubeIframeAPIReady() {

ytPlayer = new YT.Player(ytArea, {

height: ytHeight,

width: ytWidth,

videoId: ytID

});

}

$(function() {

//#playを押したら再生する

$("#play").on("click", function(){

ytPlayer.playVideo();

});

動画再生時に暗転します

こちらが、手を加えたバージョン。cssも直接記述しています。
ボタンは動画の上に置く、暗転用のcssも定義するのが違いです。
デモ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Youtube</title>
<style type='text/css'>

#youtube {

}
#playerWrap {
  position: relative;
}
.overlay {
  content: " ";
  display: block;
  position: absolute;
  width: 640px;
  height: 100%;
  z-index: 999; /*動画より上に*/
  background: rgba(0, 0, 0, 1);
}
#play {
  display: block;
  width: 5em;
  text-align: center;
  margin:150px auto 0px auto;
  padding: 5px 10px;
  background: #FFF;
  border-radius: 5px;
}
#background {
  display: none;
}
#background::after {
  position: absolute;
  z-index: -1;
  content: '';
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  top:0px;
  background: #000;
}

</style>
</head>

<body>
  <div id="playerWrap">
    <div class="overlay">
      <span id="play">再生する</span>
    </div>
    <div id="youtube"></div>
  </div>
  <div id="background"></div>

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
  <script src="youtube0.js"></script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Youtube</title>

#youtube {

}

#playerWrap {

position: relative;

}

.overlay {

content: " ";

display: block;

position: absolute;

width: 640px;

height: 100%;

z-index: 999; /*動画より上に*/

background: rgba(0, 0, 0, 1);

}

#play {

display: block;

width: 5em;

text-align: center;

margin:150px auto 0px auto;

padding: 5px 10px;

background: #FFF;

border-radius: 5px;

}

#background {

display: none;

}

#background::after {

position: absolute;

z-index: -1;

content: '';

box-sizing: border-box;

height: 100%;

width: 100%;

top:0px;

background: #000;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

そして、jsはこのようになります。
ここでjqueryを使っていたのが活きてきます。
ボタンを押したら再生は変わらず、さらに暗転用の#backgroundを表示させています。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytArea = 'youtube'; //動画が入ってくるHTML上のid
var ytID = 'DwcKed26KQ8'; //動画のID
var ytWidth = 640; //幅
var ytHeight = 390; //高さ

function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(ytArea, {
    height: ytHeight,
    width: ytWidth,
    videoId: ytID,
    events: {
      'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
    }
  });
}

// プレーヤーの状態
function onPlayerStateChange(event) {
  // 現在のプレーヤーの状態を取得
  var ytStatus = event.data;

  // 再生終了したとき
  if (ytStatus == YT.PlayerState.ENDED) {
    $(".overlay").show();
    $("#background").hide();
  }

  // 停止中のとき
  if (ytStatus == YT.PlayerState.PAUSED) {
    $(".overlay").show();
    $("#background").hide();
  }
}

$(function() {
  //#playを押したら再生する
  $("#play").on("click", function() {
    ytPlayer.playVideo();
    $(".overlay").hide();
    $("#background").show();
  });

});

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

tag.src = "https://www.youtube.com/iframe_api";

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

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var ytArea = 'youtube'; //動画が入ってくるHTML上のid

var ytID = 'DwcKed26KQ8'; //動画のID

var ytWidth = 640; //幅

var ytHeight = 390; //高さ

function onYouTubeIframeAPIReady() {

ytPlayer = new YT.Player(ytArea, {

height: ytHeight,

width: ytWidth,

videoId: ytID,

events: {

'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行

}

});

}

// プレーヤーの状態

function onPlayerStateChange(event) {

// 現在のプレーヤーの状態を取得

var ytStatus = event.data;

// 再生終了したとき

if (ytStatus == YT.PlayerState.ENDED) {

$(".overlay").show();

$("#background").hide();

}

// 停止中のとき

if (ytStatus == YT.PlayerState.PAUSED) {

$(".overlay").show();

$("#background").hide();

}

$(function() {

//#playを押したら再生する

$("#play").on("click", function() {

ytPlayer.playVideo();

$(".overlay").hide();

$("#background").show();

});

いかがでしたでしょうか。