iframeをフルページ画面に戻して小さな画面に戻すのが良い方法ですか？

Question

今、私は3x3のiframeを持っています。私はdivを追加し、それらをビデオにオーバーレイし、divをクリックしてバインドします。それはうまくいくようです：1.）私はそれを通常のサイズに戻すことはできません。トグルの種類。

$(document).ready(function() { 
 
    var height = $(window).height(); 
 
    var width = $(window).width(); 
 

 
    $('.div1').on("click", function() { 
 
    $(this).next('.video').css({ 
 
     'height': height, 
 
     'width': width, 
 
     'position': 'absolute', 
 
     'z-index': '2' 
 
    }); 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.main-content { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding-bottom: 0px; 
 
    display: flex; 
 
    flex-direction: center; 
 
    align-items: center 
 
} 
 
.flex-videos { 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 33%; 
 
    width: 100%; 
 
    min-width: 960px; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    li { 
 
    list-style: none; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    } 
 
} 
 
.div1 { 
 
    display: inline-block !important; 
 
    position: absolute; 
 
    z-index: 3; 
 
    height: 256px; 
 
    width: 480px; 
 
} 
 
.flex-video-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
    width: 100%; 
 
    min-width: 800px; 
 
} 
 
.video { 
 
    top: 0; 
 
    left: 0; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="main-content"> 
 
    <div class="flex-video-container" id="contentDiv"> 
 
    <ul class="flex-videos"> 
 
     <li> 
 
     <div class="div1"></div> 
 
     <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe> 
 
     </li> 
 
     <li> 
 
     <div class="div1"></div> 
 
     <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe> 
 
     </li> 
 
     <li> 
 
     <div class="div1"></div> 
 
     <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe> 
 
     </li> 
 
    </ul> 
 
    <ul class="flex-videos"> 
 
     <li> 
 
     <div class="div1"></div> 
 
     <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe> 
 
     </li> 
 
     <li> 
 
     <div class="div1"></div> 
 
     <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe> 
 
     </li> 
 
     <li> 
 
     <div class="div1"></div> 
 
     <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe> 
 
     </li> 
 
    </ul> 
 
    <ul class="flex-videos"> 
 
     <li> 
 
     <div class="div1"></div> 
 
     <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe> 
 
     </li> 
 
     <li> 
 
     <div class="div1"></div> 
 
     <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe> 
 
     </li> 
 
     <li> 
 
     <div class="div1"></div> 
 
     <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/73jvjJICHtw?modestbranding=1&autohide=1&showinfo=0&controls=0" frameborder="0" fullscreen></iframe> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Here's a jsfiddle to show what I currently have.

Answer 1

次のコードは、あなたが欲しいものを行う必要があります。動画が拡大されているかどうかをチェックし、インラインCSSが削除された場合は通常のサイズに戻ります。さもなければビデオは拡大されます。

$（ドキュメント）.ready（関数（）{

var height = $(window).height(); 
    var width = $(window).width(); 
    var enlarged = false; 
    $('.div1').on("click", function(){ 
    if(!enlarged){ 
    $(this).next('.video').css({'height': height, 'width': width, 'position': 'absolute', 'z-index':'2'}); 
    enlarged = true; 
    } 
    else{ 
    $(this).next('.video').attr('style', ''); 
    enlarged = false; 
    } 
    }); 
});