JavaScriptで関数が複雑な入れ子になる場合の処理

YouTubeの制御ボタンについて、機能は実装できたのですが、関数を入れ子にすると動作せず、質問させて頂きます。

まず実装できた場合がこちらでして、
https://jsfiddle.net/8d3g6mc5/
ご覧のように「再生・停止」いずれも動画が制御できています。

今回はこれを３つの関数で囲みたいのですが、そうすると動作しなくなってしまう部分で躓いてしまいました。

つまり下記のJavaScriptにあるように、
// 制御ボタンの設定の部分を、
// ★使いまわすために関数にしておくと
// ★「見る」クリックで動画表示と
// ★動画表示してからで囲むと動作しなくなってしまうのです。

Javascript
1// ★使いまわすために関数にしておく
2function YoutubeCtr() {
3
4  // ★「見る」クリックで動画表示
5  $('.lazy-load-youtube').on('click', function() {
6    $('#target').html('<div class="media">
7                        <div class="container-youtube">
8                         <iframe src="//www.youtube.com/embed/ZVT_CNl0Wvc
9                          ?autoplay=1&amp;iv_load_policy=3&amp;rel=0"
10                          allowfullscreen=""
11                          frameborder="0">
12                         </iframe>
13                        </div>
14                       </div>');
15
16    // ★動画表示してから
17    setTimeout(function(){
18
19      // 制御ボタンの設定
20      var player;
21      function onYouTubeIframeAPIReady() {
22        player = new YT.Player(
23          document.getElementsByClassName('container-youtube')[0], {
24            videoId: 'ZVT_CNl0Wvc',
25        });
26        var clickElement = document.getElementById("play");
27        clickElement.addEventListener("click", function(event) {
28          player.playVideo();
29        },false);
30        var clickElement = document.getElementById("pause");
31        clickElement.addEventListener("click", function(event) {
32          player.pauseVideo();
33        },false);  
34      }
35      function onPlayerReady(event) {
36        event.target.playVideo();
37      }
38
39    },500);
40
41  });
42}
43YoutubeCtr();

上記コードのように３つの関数を加えて動作しなくなったものがこちらです。
https://jsfiddle.net/8d3g6mc5/1/

これはYouTube APIについての問題というよりも、基本的なJavaScriptの入れ子構造について知識不足であると思うのですが、これだけ色々な入れ子になるとどう対処したらいいものか…、私ではまったく判断できません。

どうか有識者の皆さま、プロの視点からのアドバイスを頂戴できれば幸甚に存じます。
何卒宜しくお願い申し上げます。

miyabi-sun

2018/09/15 16:08

「Youtbe」に「Javascript」↑だと！？ふざけんじゃねえよお前、「YouTube」と「JavaScript」だろォ！！

miyabi-sun

2018/09/15 16:11

一文字違いでコードはすぐ動かなくなりますし、またコードが綺麗なルールで書かれて居ないとバグの箇所を見つける事が非常に困難になります。なので日本語には寛容なエンジニア達は固有名詞等、名付けられたものに関しては非常に敏感です。回答が付くor付かないにも影響することがありますので出来るだけ気をつける癖をつけて下さいね。

eaconian

2018/09/15 17:15

ありがとうございます。

退会済みユーザー

2018/09/16 00:06

みやびすんは、いつまでたってもお子ちゃまでちゅねぇ。

miyabi-sun

2018/09/16 00:38

対応ありがとうございます！

行動規範の内容に同意します

回答2件

プロじゃなくて恐縮ですが、とりあえず原因には予想がつくので投稿させていただきます。

質問者様のおっしゃっている通り、JavaScript の入れ子構造の理解不足が原因のようですね。

JavaScript は関数がスコープを作るため、 var や function で宣言した変数や関数は、基本的にその関数の外からは「見えなく」なります。

javascript
1function hoge(){
2  function fuga(){ console.log(); }
3  fuga(); // 実行可能
4}
5
6hoge(); // 実行可能
7fuga(); // => エラー (fuga は未定義)

そのため、入れ子版コードでは、onYouTubeIframeAPIReady()やonPlayerReady() 関数が youtube API から「見えなく」なってしまったため、API から呼び出せなくなっています。

youtubeAPI には詳しくありませんが、関数名から察するに、どちらの関数も（仮に複数の動画を埋め込む際でも）一つだけ定義しておけばよいのだと思います。

少なくとも、同名の関数を何度定義しても意味がない（上書きされる）ので、素直に最初のコードのように入れ子にせずに記述してください。

その上で、どのように「使いまわす」ことを考えているのか明示いただければ、何かしらの解決策も提示できる方が現れるかと存じます。

また、setTimeout() を利用して遅延させるのはこの場合明らかに無意味（どころかおそらくこれも動作を妨げる一因になっている）ので注意してください。

投稿2018/09/15 10:00

R.Mizukami

総合スコア1086

eaconian

2018/09/15 13:08 編集

ありがとうございます。『// ★使いまわすために関数にしておく』は諦めるにしても、他の２つの必要性は次の通りです。理由➀ 動画はプラグインによって遅延読み込みさせておりますゆえ、『// ★「見る」クリックで動画表示』は必須となります。（正確には「見る」でなく「サムネイル」のクリックですが。）理由➁ クリック後に動画が読み込まれる過程で当該プラグインがiframeを出現させるために、出現後に『// 制御ボタンの設定』を適用しなければならないのですが、その順番について私は『当該プラグインの処理後に』という条件が書けないために『// ★動画表示してから』という条件にしております。これらの理由によって、『.on('click', function() {』が必須で、『setTimeout()』も私には必要であるという事情でございます。また思い至る点があればご指摘くださいませ。

行動規範の内容に同意します