Gamaliel Gamaliel - 2 months ago 9
CSS Question

Better way to achieve toggling the iframe to full page screen and back to small?

So right now, I have a 3x3 iframes. I added divs and overlayed them on the videos, and bind a click on the divs. It seems to work but: 1.) I cant make it go back down to the normal size. Kind of a toggle thing.



$(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

The below code should do what you want. Checks whether the video was enlarged and removes the inline css so it returns to the normal size if it was. Otherwise the video is enlarged.

$(document).ready(function(){

  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;
    }
  });
});
Comments