クリックでYouTubeの動画が展開されるAPIを使ったスニペット

10分

YouTubeAPI

SHARE

YouTubeのタグ埋め込みでは、静的に動画を埋め込むことしかできず、できることが限られます。

YouTube APIを利用することでJavaScriptを介してYouTubeの動画を制御できるようになります。例えば、クリックでモーダルが開きYouTubeの動画の再生や、スクロールして到達したら動画を再生などです。

この記事では、ページ内にYouTube動画を iframe で埋め込んだ形とは異なり、クリックで動画の読み込みが開始されるので、ページの読み込み時間と負荷を軽減できます。

かかかず
かかかず

そんなYouTube APIを使ったスニペットについて解説していきます。

実装後のデザインサンプル

早速、実装後のサンプルです。

横並びに並んだボタンをクリックすると、YouTubeの動画が表示され再生されます。

実装の手順と方法

手順の解説

実装の手順と方法について解説していきます。基本コピペが基本の方法で、4つのSTEPで完了します。

かかかず
かかかず

順に解説していきます。

jQuery本体の読み込み

jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下の記事を参考にして、jQuery本体をHTMLファイルに書き込みましょう。

関連記事 jQueryのインストール方法

HTMLの記述

初めに、設置したい場所にHTMLの記述をします。

HTML 

<div class="YouTubelist">
<ul>
<li><a href="javascript:void(0);" id="YouTube01" data-mvnum="1">MOVIE 01</a></li>
<li><a href="javascript:void(0);" id="YouTube02" data-mvnum="2">MOVIE 02</a></li>
<li><a href="javascript:void(0);" id="YouTube03" data-mvnum="3">MOVIE 03</a></li>
</ul>
</div>

表示する動画を増やしたい場合は、<li>〜〜</li> をコピーして、idとdata-mvnum の数値を増やせばOKです。

CSSの記述

次にCSSをコピペします。

CSS 

.YouTubelist ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    border: none;
    flex-wrap: wrap;
    gap: 2%;
    text-align: center;
}
.YouTubelist ul:after {
    content: "";
    width: 31%;
}
.YouTubelist ul li {
    width: 31%;
    display:inline-block;
}
.YouTubelist ul li a {
    background: #fafafa;
    text-decoration: none;
    display: block;
    padding: 11px;
    box-shadow: 0 2px 6px #aaa;
    transition: 0.3s ease-in-out;
}
.YouTubelist ul li a:hover {
    box-shadow: 0 5px 10px #aaa;
    transform: translateY(-4px);
}
.YouTubelist ul li a:before {
    content: "\f008";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: relative;
    display: block;
    font-size: 3rem;
    line-height: 1;
}
.YouTubelist ul li a:hover:before {
    content: "\f144";
}
/* YouTube CSS */
.YouTubelist ul li.clicked {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  order: -1;
}
.YouTubelist iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  animation: fadeHeader 0.7s ease 0s 1 normal;
}
@keyframes fadeHeader {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
  }
}

かかかず
かかかず

アイコンはFontAwesomeを使っています。

アイコンを使わない場合は、.YouTubelist ul li a:before を削除すればOKです。

jQueryの記述

最後に、以下のjQueryを<body>〜〜</body> のクロージングタグ直前に記述します。

jQuery 

var ytData = [
    {
        id:'YouTube01',
        movie:'n0QNaym0jDI'
    }, {
        id:'YouTube02',
        movie:'Odv-zbpy-Y8'
    }, {
        id:'YouTube03',
        movie:'HtnGqgW_Hig'
	}
];
 
var ytPlayer = [], ytPlaying, ytStop, ytPlay;
 
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    ytPlayer[thisIndex] = new YT.Player(ytData[thisIndex]['id'], {
        controls: 0,
        disablekb: 0,
        iv_load_policy: 3,
        modestbranding: 1,
        rel: 0,
        showinfo: 0,
        videoId: ytData[thisIndex]['movie'],
		playerVars: {
			autoplay: 1,
			playsinline: 1
		},
        events: {
            "onReady": onPlayerReady,
        }
    });
}

function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
}

$(function(){
	$('.YouTubelist a').on('click', function(){
		var self = $(this),
		thisId = self.attr('id');
		thisIndex = self.attr('data-mvnum') - 1;
		onYouTubeIframeAPIReady()
	});
});
	$(".YouTubelist ul li").click(function(){
  	$(this).toggleClass("clicked");
});

STEP.2 で動画の数を増やした場合は、このコードの冒頭にあるidとmovie をコピペして増やしてあげればOKです。

かかかず
かかかず

これで設置は完了です。

コピペ用のコード一式

コピペ用のコード一式です。上記の手順と方法のコードと同じです。

コードを表示する

HTML 

<div class="YouTubelist">
<ul>
<li><a href="javascript:void(0);" id="YouTube01" data-mvnum="1">MOVIE 01</a></li>
<li><a href="javascript:void(0);" id="YouTube02" data-mvnum="2">MOVIE 02</a></li>
<li><a href="javascript:void(0);" id="YouTube03" data-mvnum="3">MOVIE 03</a></li>
</ul>
</div>

CSS 

.YouTubelist ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    border: none;
    flex-wrap: wrap;
    gap: 2%;
    text-align: center;
}
.YouTubelist ul:after {
    content: "";
    width: 31%;
}
.YouTubelist ul li {
    width: 31%;
    display:inline-block;
}
.YouTubelist ul li a {
    background: #fafafa;
    text-decoration: none;
    display: block;
    padding: 11px;
    box-shadow: 0 2px 6px #aaa;
    transition: 0.3s ease-in-out;
}
.YouTubelist ul li a:hover {
    box-shadow: 0 5px 10px #aaa;
    transform: translateY(-4px);
}
.YouTubelist ul li a:before {
    content: "\f008";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: relative;
    display: block;
    font-size: 3rem;
    line-height: 1;
}
.YouTubelist ul li a:hover:before {
    content: "\f144";
}
/* YouTube CSS */
.YouTubelist ul li.clicked {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  order: -1;
}
.YouTubelist iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  animation: fadeHeader 0.7s ease 0s 1 normal;
}
@keyframes fadeHeader {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
  }
}

jQuery 

var ytData = [
    {
        id:'YouTube01',
        movie:'n0QNaym0jDI'
    }, {
        id:'YouTube02',
        movie:'Odv-zbpy-Y8'
    }, {
        id:'YouTube03',
        movie:'HtnGqgW_Hig'
	}
];
 
var ytPlayer = [], ytPlaying, ytStop, ytPlay;
 
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    ytPlayer[thisIndex] = new YT.Player(ytData[thisIndex]['id'], {
        controls: 0,
        disablekb: 0,
        iv_load_policy: 3,
        modestbranding: 1,
        rel: 0,
        showinfo: 0,
        videoId: ytData[thisIndex]['movie'],
		playerVars: {
			autoplay: 1,
			playsinline: 1
		},
        events: {
            "onReady": onPlayerReady,
        }
    });
}

function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
}

$(function(){
	$('.YouTubelist a').on('click', function(){
		var self = $(this),
		thisId = self.attr('id');
		thisIndex = self.attr('data-mvnum') - 1;
		onYouTubeIframeAPIReady()
	});
});
	$(".YouTubelist ul li").click(function(){
  	$(this).toggleClass("clicked");
});

ざっくりとしたコードの解説

最後に、コードについての解説です。

HTML：YouTube動画を読み込ませる記述

HTMLはクリックしてYoutube動画を読み込ませるaタグして、それぞれに任意のidと data-mvnum を付与します。

HTML 

<div class="YouTubelist">
<ul>
<li><a href="javascript:void(0);" id="YouTube01" data-mvnum="1">MOVIE 01</a></li>
<li><a href="javascript:void(0);" id="YouTube02" data-mvnum="2">MOVIE 02</a></li>
<li><a href="javascript:void(0);" id="YouTube03" data-mvnum="3">MOVIE 03</a></li>
</ul>
</div>

このdata-mvnum とJSを紐付けて、再生させる動画IDを指定します。

CSS：YouTube動画のレスポンシブ化

表示されるYouTube動画のレスポンシブ対応は、CSSで調整をします。

YouTube 動画のアスペクト比は基本16:9の比率なので、横幅は width: 100%; 、高さは padding-top: 56.25%; を指定することで、アスペクト比を保ちます。

CSS 

.YouTubelist ul li.clicked {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.YouTubelist iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

こうすることで、clickされて表示された動画がレスポンシブに対応します。

jQuery：動画の指定とクリックでclass付与

YouTubeの動画は、記述するJSの冒頭部分のid に動画IDを記述します。

動画IDとは？

動画IDは、YouTubeのURLに含まれる「v=○○○」の「○○○」部分を指します。

jQuery 

var ytData = [
    {
        id:'YouTube01',
        movie:'n0QNaym0jDI'
    }, {
        id:'YouTube02',
        movie:'Odv-zbpy-Y8'
    }, {
        id:'YouTube03',
        movie:'HtnGqgW_Hig'
	}
];

そして以下の記述で、クリックした時にそのli へ .click のclassを付与します。

jQuery 

	$(".YouTubelist ul li").click(function(){
  	$(this).toggleClass("clicked");
});

この一文があることで、前述のレスポンシブ用のCSSがifameに当たり、動画も最適なサイズになるようにしています。

前の記事

リンクカードのイラスト
プラグインなしで外部リンクの画像やテキストを取得してリンクカー…

次の記事

無料で使えるMaterial Iconsの特徴とアイコンの表示…
Googleアイコン

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら