【YouTubeサムネイル動画】JavaScriptで指定の場所（area）に表示されない

使用言語とAPI

HTML、CSS
PHP
JavaScript
Youtube > IFrame Player API

目指している仕様

Youtube Player APIを使用して動画を複数埋め込む　←完了
複数のYouTube動画をサムネイルクリックで切り替える　←完了
各サムネイル下部にテキストを配置したい（タイトル、テキスト）←出来ない

　※添付画像をご参照くださいませ。

参考サイト：YouTube動画をサムネイルクリックで切り替える

添付画像

コード

現在、以下のようなコードを書きましたが、後述する問題点が発生し、解決できずにいます。

▼.php


 <section class="pc_onle">
 <div class="yt_box">
  <div id="player"></div>
  </div>
   <div class="kobox">
    <div id="thumbnail">
	   <div id="moves01_box">
	   <div id="moves01"></div>
	    <h2 id="moves01_tx">タイトル</h2>
	    <P>テキスト</P>
	   </div>
	   <div id="moves02_box">
	    <div id="moves02"></div>
	    <h2 id="moves02_tx">タイトル</h2>
	    <P>テキスト</P>
	   </div>
	   <div id="moves03_box">
	    <div id="moves03"></div>
	    <h2 id="moves03_tx">タイトル</h2>
	   </div>
	   <div id="moves04_box">
	     <div id="moves04"></div>
	    <h2 id="moves04_tx">タイトル</h2>
	   </div>
	 </div>
    </div>
 </section>



<?php get_footer(); ?>

▼.js

var ytWidth = 640;
var ytHeight = 390;

// 埋め込むyoutubeのIDを指定
var ytData = [
    {
        id: 'XB_iA1791rk',
        area: 'moves01',
    }, {
        id: 'Gah14eVPgNA',
        area: 'moves02'
    }, {
        id: 'v2LOGEbP1NE',
        area: 'moves03'
    }, {
        id: 'ztG7xY2_UwM',
        area: 'moves04'
    }
];

ytBaseUrl = 'https://www.youtube.com/embed/';

var ytPlayer = [];
var ytPlaying, ytStop, ytPlay;

// サムネイル画像の埋め込み準備
var thumbInsert = '';
for(var i = 0; i < ytData.length; i++) {
    thumbInsert += '<div id="' + ytData[i]['area'] + '"><li><a href="' + ytBaseUrl + ytData[i]['id'] + '">';
    thumbInsert += '<img src="http://img.youtube.com/vi/' + ytData[i]['id'] + '/mqdefault.jpg" alt="" />';
    thumbInsert += '</a></div><li>';
}
var ytPlayer;
// YouTube Player APIを読み込む
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// API読み込み後にプレーヤーを埋め込む
function onYouTubeIframeAPIReady() {
    ytPlayer = new YT.Player('player', {
        height: ytHeight,
        width: ytWidth,
        modestbranding: 1,
        videoId: ytData[0]['id'],
        playerVars: {
        rel: 0
    }
    });
}
 
// 各プレーヤー準備完了後の処理
function onPlayerReady(e) {
    for (var i = 0; i < ytData.length; i++) {
        if(e.target.getIframe().id == ytData[i]['area']) {
            console.log(ytData[i]['area'] + 'のプレーヤー準備完了しました。');
        }
    };
}

// プレーヤーの状態に変化があった時に実行
function onPlayerStateChange(event) {
    // 各プレーヤーの状態を確認
    for(var i = 0; i < ytData.length; i++) {
        var thisState = ytPlayer[i].getPlayerState();
        if( thisState == 1 && ytPlaying == undefined) {
            ytPlaying = i;
        } else if(thisState == 1 && ytPlaying != i) {
            ytStop = ytPlaying;
            ytPlay = i;
        } else {
        }
    }
    // 同時再生があった場合、元々再生していた方を停止する
    if(ytStop != undefined) {
        ytPlayer[ytStop].pauseVideo();
        ytStop = undefined;
    }
    // 現在再生中のプレーヤー番号を保存しておく
    if(ytPlay != undefined) {
        ytPlaying = ytPlay;
        ytPlay = undefined;
    }
}

jQuery(document).ready(function($) {
    // サムネイル画像の埋め込み
    $('#thumbnail').append(thumbInsert);

    $(document).on('click', '#thumbnail a', function() {
        ytId = $(this).attr('href').replace(ytBaseUrl, '');
        play(ytId, 0);
        return false;
    });
});

問題点

表示させたい場所にYouTube動画が表示されず、原因不明で困っております。.php内に記載の「<div id="moves01"></div>、<div id="moves02"></div>、<div id="moves03"></div>、<div id="moves04"></div>」こちらに表示させたいです。

.js内には表示させたいidの箇所をareaにて指定しておりますが…なぜか表示されず。
「area: 'moves01',area: 'moves02',area: 'moves03',area: 'moves03'」

「YouTube動画サムネイル切替」と「動画表示を指定の箇所に表示」の両方を実現させたいです。

ご教授よろしくお願いいたします。