FullScreen

HTML

<body>
  <div id="wrapper">
      <div id="player">I'm a video player</div>
      <button>Toggle fullscreen</button>
      <br/>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices sodales lorem nec iaculis. Vestibulum nec justo vel justo ultricies imperdiet. Morbi pulvinar pharetra cursus. Cras sed nisi sed justo rhoncus interdum. Mauris ac blandit nisi. Aenean sed tortor nec diam maximus accumsan. Duis dapibus sapien ligula, in mollis tortor congue eu. In a mi venenatis, aliquam arcu at, porttitor turpis. Suspendisse eget ligula sed quam sollicitudin pretium. Phasellus enim eros, fringilla a leo quis, mollis tincidunt ex. Mauris pharetra diam vitae metus luctus, et dignissim sapien tristique. Aliquam pellentesque aliquam felis, id consectetur tellus rutrum sit amet.

        Etiam eget sollicitudin libero. Aliquam erat volutpat. Morbi non elit quis nulla elementum vulputate. Donec velit ante, ornare ut pulvinar eget, pulvinar et ipsum. Sed finibus vel lorem tempus porta. Suspendisse lobortis arcu erat. Donec ac lacus euismod, feugiat ex nec, suscipit dolor. Integer aliquam, elit ut vulputate ultricies, justo risus imperdiet justo, eu varius leo eros et dui. Curabitur ultrices in odio sit amet maximus. Fusce sit amet semper mauris. Proin blandit vulputate malesuada. Curabitur sit amet lectus a nisl interdum egestas. Nulla nulla nulla, ultrices vel egestas in, pretium vitae orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

        Cras justo mi, gravida at lorem vel, sagittis interdum urna. Integer facilisis, diam ut consectetur malesuada, orci lorem porttitor mauris, eu viverra erat leo id dolor. Sed mi mi, luctus vel sollicitudin sed, luctus eget felis. Quisque eget laoreet justo. Duis id ornare sapien, vitae vestibulum purus. Ut efficitur ipsum libero, quis mattis elit feugiat ac. Pellentesque odio mauris, facilisis vitae bibendum dapibus, pretium sed massa. Phasellus fringilla...

CSS

#player {
  background-color: black;
  color: white;
  width: 50%;
  height: 200px;
}

#wrapper {
  background-color: white;
  color: black;
  overflow: auto;
}

JavaScript

function toggleFullScreen(e) {
    if ((document.fullScreenElement && document.fullScreenElement !== null) || // alternative standard method  
    (!document.mozFullScreen && !document.webkitIsFullScreen)) { // current working methods  
        if (e.requestFullScreen) {
            e.requestFullScreen();
        } else if (e.mozRequestFullScreen) {
            e.mozRequestFullScreen();
        } else if (e.webkitRequestFullScreen) {
            e.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        return true;
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        return false;
    }
}

$("button").click(function() {
    if(toggleFullScreen($('#wrapper')[0])) {
    	$('#player').css({width: '100%'});
	} else {
    	$('#player').css({width: '50%'});
    }
});