Expand Html Element To Full Screen Using jQuery

With a little jQuery script, you can responsively expand an Html element to fullsize of browser window with a smooth transition effect. Great for creating a gallery/slideshow/video container which allows you to easily switch to fullscreen mode by clicking a toggle button.

How to use it:

1. Load the Font Awesome in the head section for the toggle icons (Optional).

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

2. Create an video player container with a fullscreen mode toggle icon and play/pause controls.

<div class="player">
  <div class="pl-wrap">
    <!-- Your content goes here -->
    <div id="pl-bar"> <i class="fa fa-play"></i> <i class="fa fa-expand r"></i> </div>
  </div>
</div>

3. The required CSS styles.

.r { float: right; }

/*PLAYER*/

.player {
  position: relative;
  width: 850px;
  height: 480px;
  margin-top: -240px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  background: #444;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.player.active {
  margin-top: 0;
  top: 0 !important;
}

.pl-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

#pl-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: #333;
  border-top: 1px solid #444;
}

#pl-bar i {
  height: 100%;
  width: 40px;
  border-left: 1px solid #444;
  line-height: 50px;
  text-align: center;
  color: #999;
  cursor: pointer;
}

#pl-bar i:first-child {
  border-left: none;
  border-right: 1px solid #444;
}

#pl-bar i:hover {
  color: #eaeaea;
  background: #3b3b3b;
}

4. Include the latest version of jQuery library at the end of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

5. The Javascript to active the fullscreen transition.

$(document).ready(function(){

var w = $(window).width();
var h = $(window).height();
var pl = $('.player');

pl.css('top', h/2);


//FULL SCREEN 
var c = 1;
$('.fa-expand').click(function() {
c++;

$(this).toggleClass('fa-compress');

//odd -> Full Screen 
if(c%2==0){

pl.animate({width:w}, 300, function(){
$(this).animate({height:h}, 300);
pl.addClass('active');
});
}

//even -> Exit Full Screen 
if (c%2!=0){

pl.animate({height:'480'}, 300, function(){
$(this).animate({width:'850'}, 300);
pl.removeClass('active');
});
}
});

//PLAY BTN
$('.fa-play').click(function(){
$(this).toggleClass('fa-pause');
});

});

---

This awesome jQuery plugin is developed by andrecortellini. For more Advanced Usages, please check the demo page or visit the official website.