Iframe | youtube iframeのモバイルバックボタン

Question

私はあなたからのライトボックスに表示されるビデオを持っています、カスタムではなく、プラグインです。

携帯で表示されている肖像画は、見た目がよく見える上下左右にいくつかの部屋が残っています。

私が横長になると、ビデオがフルスクリーンで満たされ、ページに戻ることはできません。私の最初の反応は電話ボタンを押すことでしたが、ライトボックスを単に削除する方法はわかりません。 JSに携帯電話の戻るボタンからonclickを取得する方法はありますか？

あなたは、ナビゲーションイベントとstate.directionに耳を傾ける必要があります：私はアスペクト比

 var width: number = $('.youtube-video-lightbox').outerWidth(); 
     var height: number = (width/16) * 9; 
     $('.youtube-video-lightbox').height(height); 

Answer 1

あなたは、次のコードを使用して試すことができますを保管しておりますので、

それはフルスクリーンに行く理由があります。 this link

で

$(window).on("navigate", function (event, data) { 
    var direction = data.state.direction; 
    if (direction == 'back') { 
    // close the light box here 
    } 
    if (direction == 'forward') { 
    // do something else 
    } 
}); 

詳細は私の携帯電話に上記のコードをテストし、それが正常に動作します。ライトボックスを閉じた後、プログラムの流れを停止して、戻るボタンのデフォルトのナビゲーションを停止する必要があるかもしれません。

Answer 2

織り：http://kodeweave.sourceforge.net/editor/#e110ed7e89c3a38335739656a02f9850

あなたはPure CSS Based Lightboxをしようと考えたことはありますか？

$('[data-target]').on('click', function() { 
 
    $('.page').attr('src', $(this).attr('data-target')); 
 
}); 
 

 
$('#call').on('change', function() { 
 
    (this.checked) ? "" : $('.page').attr('src', ''); 
 
});

input[id=call] { 
 
    display: none; 
 
} 
 

 
a { 
 
    margin: 1em; 
 
} 
 

 
.bg, 
 
.content { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    transition: all ease-in 150ms; 
 
} 
 

 
.bg { 
 
    background: #515151; 
 
    background: rgba(0, 0, 0, 0.58); 
 
} 
 

 
.content { 
 
    margin: 2.6352em; 
 
    padding: 1em; 
 
    background: #fff; 
 
} 
 

 
input[id=call]:checked ~ .bg, 
 
input[id=call]:checked ~ .content { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 
.block { 
 
    display: block; 
 
} 
 

 
.pointer { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="call" type="checkbox" /> 
 
<p> 
 
    <a href="javascript:void(0)" data-target="http://bing.com/" class="pointer block"> 
 
    <label for="call" class="pointer">Bing</label> 
 
    </a> 
 
    <a href="javascript:void(0)" data-target="http://duckduckgo.com/" class="pointer block"> 
 
    <label for="call" class="pointer">DuckDuckGo</label> 
 
    </a> 
 
</p> 
 
<label for="call" class="bg pointer"></label> 
 
<div class="content"> 
 
    <iframe width="100%" height="100%" frameborder="0" class="page"></iframe> 
 
</div>