modal-video.jsでyoutubeの動画再生が終了したら、自動でモーダルウィンドウを閉じたい

modal-video.jsでyoutubeの動画再生が終了したら、自動でモーダルウィンドウを閉じたいです。

colorbox1を使用しての閉じ方は見つかったのですが、modal-videoでは見つかりませんでした。。

もしかしたら初歩的な事かもしれませんが、どなたかご教授いただけると幸いです。

【参考】colorboxでのウィンドウの閉じ方
https://qiita.com/kinshist/items/9a824a07668cc6d7be39

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

回答1件

親ページ側に下記を追加し、

JavaScript
1function close_modal() {
2	jQuery('.js-modal-video-dismiss-btn').trigger('click');
3}

iframe側のコードを下記のように変えれば出来ると思います。（未検証）

js
1// parent.$.colorbox.close();
2//         ↓
3   parent.close_modal();

投稿2018/01/18 00:44

kei344

総合スコア69625

Alice_W

2018/01/18 07:20

つたない質問にもかかわらず、ご回答頂きありがとうございます。 teratailでは今まで一度も回答を頂けたことが無かったので、大変ありがたいです！ただ、クリックをして閉じるのではなくて、動画の再生が終わると共に自動で閉じてもらいたかったのです。どうやら終了イベントをキャッチできればどうにかなりそうなのですが、そのイベントをキャッチする書き方が分かりません。。もし、ご存知でしたらご教示頂けるとありがたいです。

kei344

2018/01/18 08:52

提示された記事に書かれています。それのcolorbox部分の書き換え方を提示しています。

x_x

2018/01/18 09:03

すみません、提示された記事はmodal-video.jsではないですよね？

Alice_W

2018/01/18 09:54

はい、あくまでmodal-video.jsを使っての自動でモーダルを閉じる方法です。掲示した記事は参考になるかと思って置きました。まぎらわしかった様で申し訳ありません。 modal-video.jsは子となるhtmlファイルが要らないモーダルなので、親ページ子ページの概念が無く、困っておりました。

kei344

2018/01/18 12:30

To: x_xさん書き方が飛びすぎましたね、すみません。記事にある、iframe内に置いたHTML上でYoutubeAPIを使って呼び出すことで、動画の終了/停止を検知する方法をつかって、記事ではcolorboxを閉じている部分を提示のものに置き換えればいけるのでは、という回答です。modal-video.jsにはクローズの関数が用意されていないので、閉じるボタンを押す様なコードを書いています。