YoutubeAPIを使ってモーダルウィンドウを開いた時に再生について：停止「pauseVideo()」が動作しない

Question

https://webkcampus.com/201912/1716/

▲ こちらのページある「YoutubeAPIを使ってモーダルウィンドウを開いた時に再生」を自サイトに実装したのですが、
モーダルウインドウを閉じた時の「動画停止」がChrome以外のブラウザ（firefoxとIEで確認）で動作しません。

Jqueryコードの

$lay.unbind().click(function () {
    player.pauseVideo();
    $content.add($lay).fadeOut("fast", function () {
        $lay.remove();
    });
});

の

player.pauseVideo();

の部分に問題があるようで、そこで処理がストップして　$lay.remove();　も動作しない状態です。
色々試したのですが解決できず、、
もし原因がわかる方いらっしゃいましたら教えてくださいませ m(_ _)m

参考ページのデモ：
https://webkcampus.com/sample/youtube-autoplay/

Comments

[sizka_rn]

「～の部分に問題があるようで、～」の部分を詳しく知りたいです。
デベロッパーツールのコンソールに何かエラーが出ているのでしょうか？

[mainichi_sn]

player.pauseVideo();　を削除すると　$lay.remove();　が動作したので
player.pauseVideo();　に問題があると思った次第です。素人考えですみません。

デベロッパーツールのコンソールは確認しておりませんm(_ _)m

[mainichi_sn]

今、DEMOページでFirefoxのコンソールを確認したところ、下記のようなエラーでした、

youtube.js:43:20

Uncaught TypeError: player.pauseVideo is not a function
inner https://webkcampus.com/sample/youtube-autoplay/youtube.js:43
jQuery 9
inner https://webkcampus.com/sample/youtube-autoplay/youtube.js:42
<anonymous> https://webkcampus.com/sample/youtube-autoplay/youtube.js:64
jQuery 2

Answer 1

イベント発火時にコンソールでplayerの中を確認するとundefinedになっています。
これはオブジェクトの生成が完了する前に実行しようとしているためです。

解決策
JSが読み込まれたらオブジェクトの生成を開始させます。
つまり、39行目で呼び出している関数を外に出すだけで解決します。
関数定義後の29行目後に移動させてみたらどうでしょうか？

youtubeAPIInit() // 39行目 -> 30行目に移動

Comments

[mainichi_sn]

ご回答ありがとうございます。
29行目後に移動させてみましたのですが

■サムネクリック時
Uncaught TypeError: player.playVideo is not a function

■$layクリック時
Uncaught TypeError: player.pauseVideo is not a function

という感じになってしまいました。

[Create_NAYU]

私の環境がたまたま良かったのかもしれません。
すみません。

別の原因として下記のurlの回答にある通り"iframe"が初めから非表示になっているとエラーになるそうです。
https://stackoverrun.com/ja/q/12007146

代案として書いてみましたがいかがでしょうか？
jQuery, playVideo, pauseVideoを使わず、最低限の要素にしてみました。ご参考ください。
https://codepen.io/RubikiscubeSt/pen/JjXBzqx

[mainichi_sn]

代案のコードまでありがとうございますm(_ _)m
恐縮です、なんとお礼を言ったら良いか..　
書いていただいたコードに差し替えて修正したところ見事希望どおりの実装ができました！

本当にありがとうございますm(_ _)m

[mainichi_sn]

=>　は　IEで未対応とのことだったので function に書き換えてみました！
本当にありがとうございます！