###前提・実現したいこと
Youtube動画(iframe)を、モーダルウィンドウ上に埋め込みたいのですが、
動画と自由なキャプションを一緒に表示させることが出来るような、
プラグインがなかなか見つからず、現在 ”animateModal.js” を使うと、
なんとか一緒に表示させることが出来ましたが、
Youtubeウインドウ内の ”全画面表示”ボタンをクリックすると、
モーダルウィンドウ上から元の(下に隠れていた)画面に戻った上で動作するようで、
全画面表示がうまく動きません。
colorboxといったプラグインでは、全画面表示はうまく動くようですが、
自由なキャプションを割り当てられません。
animateModal.js をある程度いじれば、全画面表示出来るものなのでしょうか?
ご教授頂けると助かります。
###該当のソースコード
ひとまず、ダウンロードしたjsはいじっていない状態です。
以下テストサーバに挙動を確認出来るようにしてみました。
ページ内の ”DEMO1” をクリックすると、モーダルウィンドウが出て来るのですが、
全画面ボタンを押すと、動作NGです。
※比較対象として、モーダルウィンドウではない部分にも、Youtubeを埋め込んでいます。
http://runandgun.exout.net/test2.html
###補足情報
操作オプションとして、allowfullscreen は設定しています。
###追記情報(20170103)
「動作NG」という記載が言葉足らずだったのと、chromeブラウザでの動作確認が漏れておりました。大変申し訳ありませんでした。
改めて困っている内容を、1つ追加して2点に纏めました。
①Safariブラウザにて、animateModalのモーダル画面に、Youtube(iframe)を埋め込んだ場合、モーダル画面上で、全画面表示ボタンを押すと、全画面とならず、モーダル呼び出し元の画面に動画が小さく表示される問題。
chromeブラウザでは問題なく全画面表示されました。Safari固有の問題であるのかもしれませんが、回避方法はないものでしょうか。
以下参考。
http://runandgun.exout.net/test2.html
②Chromeブラウザでも発生するのですが、モーダル呼び出し元の画面に、position:fixed指定がある要素が存在する場合、モーダル画面を呼び出すと、当該fixed要素は裏に隠れるのですが、全画面表示ボタンを押すと、当該fixed要素が全面動画よりも前に表示される問題。
これについてはブラウザは関係ないようです。回避へのアプローチはどういったものがあるのでしょうか。
以下参考。
http://runandgun.exout.net/test3.html
。