前提・実現したいこと
ポップアップで表示した動画を全画面表示すると、一瞬表示されて消えます。
リサイズ時にリロードするようになっており、全画面表示した際にリサイズイベントが起こるものです。
※下記と同じ状況です。
https://teratail.com/questions/111963
本来は、リサイズ時のリロードをやめれば良いというのは理解しておりますが、現在のところ、状況的にそれが難しいです。
リサイズ時にリロードするが、動画の全画面表示の時はリロードさせない
とすることは可能でしょうか?
可能であれば、ご教授いただきたく思います。
該当のソースコード
javascript
1// load rewrite 2var timer = false; 3var w = 0; 4 5//ロード時 6$(window).load(function() { 7 w = $(window).width(); 8}); 9 10//リサイズ時 11$(window).resize(function() { 12 if (timer !== false) { 13 clearTimeout(timer); 14 } 15 timer = setTimeout(function() { 16 if($(window).width() != w){ 17 location.reload(); 18 w = $(window).width(); 19 } 20 }, 200); 21});
ポップアップに使用しているプラグインは「magnific-popup」です。
https://dimsemenov.com/plugins/magnific-popup/
動画は「vimeo」を利用しています。
<p class="btnMovie"><a class="popup-iframe" href="https://vimeo.com/******">MOVIE</a></p> <script src="assets/js/vendor/jquery.magnific-popup.min.js"></script> <script> $(function(){ $('.popup-iframe').magnificPopup({ type: 'iframe', mainClass: 'mfp-fade', removalDelay: 200, preloader: false, fixedContentPos: false }); }); </script>
試したこと
popupが表示されるときに追加されるclassの有無を判別して、ある時は何もしない、無い時はリロードする
ということができないかなと試行錯誤してみたのですが、やはり動画が一瞬表示されて消えてしまいます。
$(document).ready(function(){ if($('.mfp-bg').length) { } else { var timer = false; var w = 0; //ロード時 $(window).load(function() { w = $(window).width(); }); //リサイズ時 $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { if($(window).width() != w){ location.reload(); w = $(window).width(); } }, 200); }); } });
当方、jsは詳しくないため、全然方向違いのことをしているかもしれません。
お知恵を拝借できれば幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー