Edge to edge video #1

by laustdeleuran

HTML

<script src="http://vjs.zencdn.net/4.1.0/video.js"></script>
<link rel="stylesheet" href="http://vjs.zencdn.net/4.1.0/video-js.css">
<!--http://stackoverflow.com/questions/6379544/edge-to-edge-html5-video-->
  <div id="buttonImportant"> CLICK ME!!!  </div>
  
<div class="video-js-box" id="videoContainer"> 
    <video class="video-js" preload loop fullscreen autoplay> 

      <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
      <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm; codecs="vp8, vorbis"' /> 
      <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
      <object id="flash_fallback_1" class="vjs-flash-fallback" width="1280" height="720" type="application/x-shockwave-flash" 
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
        <param name="allowfullscreen" value="true" /> 
        <param name="flashvars" 
          value='config={"playlist":["http://vjs.zencdn.net/v/oceans.png", {"url": "../vid/http://vjs.zencdn.net/v/oceans.mp4","autoPlay":true,"autoBuffering":true}]}' /> 
      </object> 
    </video> 
  </div>

CSS

body {
	margin: 0;
}

.video-js-box.fullScreen {
	width: 100% !important;
	min-width: 380px !important;
	min-height: 280px !important;
	position: relative;
	background: #eee;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	height: 100% !important;
	z-index: 998;
}

.fullScreen .video-js {
	height: auto;
/*height: 100% !important;
    width:100% !important;*/
	width: 100%;
	top: 0;
	left: 0;
	margin: 0 auto;
	display: block;
}

.video-js-box {
	width: 400px;
	height: auto;
}

.video-js-box video {
	width: 400px;
	height: auto;
}

#buttonImportant {
	position: fixed;
	top: 0;
	right: 0;
	width: 100px;
	height: 100px;
	border-radius: 8px;
	background: #eee;
	font-size: 1.3em;
	z-index: 999;
}

JavaScript

$(document).ready(function() {
	VideoJS.setupAllWhenReady();

	var clicked = document.getElementById("buttonImportant")

	var videoContainer = document.getElementById('videoContainer');
	var video = videoContainer.getElementsByTagName('video')[0];

	video.style.height = "auto";
	video.style.width = "400px";

	clicked.addEventListener('click', function() {
		if (videoContainer.className.lastIndexOf("fullScreen") >= 0) {
			videoContainer.className = "video-js-box";
			video.style.height = "";
			video.style.width = "";
		} else {
			videoContainer.className = "video-js-box fullScreen";
			video.style.height = "";
			video.style.width = "";
		}
		myResizerObject.prevWidth = video.offsetWidth;
		myResizerObject.prevHeight = video.offsetHeight;



		myResizerObject.Init();
	}, false);
    setTimeout(function () {
        debugger;
    }, 3000);

	var RESIZER = function() {

			this.prevWidth = video.offsetWidth;
			this.prevHeight = video.offsetHeight;

			this.videoContainer = document.getElementById('videoContainer');
			this.video = videoContainer.getElementsByTagName('video')[0];
			this.videoStyle = this.video.style;

			var ratio = this.video.offsetHeight / this.video.offsetWidth;

			var that = this;

			this.Init = function() {
				if (that.videoContainer.className.lastIndexOf("fullScreen") >= 0) {
					var videoContOffsetWidth = that.videoContainer.offsetWidth;
					var videoOffsetWidth = that.video.offsetWidth;
					var videoContOffsetHeight = that.videoContainer.offsetHeight;
					var videoOffsetHeight = that.video.offsetHeight;

					if (that.prevWidth != videoContOffsetWidth) {
						that.prevWidth = videoContOffsetWidth;
						var desired = videoContainer.offsetHeight / videoContainer.offsetWidth;
						if (desired > ratio) {
							that.videoStyle.width = videoContOffsetWidth * desired + videoContOffsetWidth * desired + "px";
							that.videoStyle.left = -1 * (videoOffsetWidth - videoContOffsetWidth) / 2 + 'px';
						} else...