JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
	<div id="videoContainer">
		<div>
			<video src="http://lafilledo.com/media/newhomepage/video/movie2.webm" autoplay loop></video>
		</div>
	</div>
	<div id="content">
	</div>
</div>

CSS

html, body {height:100%;margin:0;background:#000;}
#wrapper {overflow:hidden;position:relative;height:100%;}
#videoContainer {overflow:hidden;position:absolute;right:12%;background:#000;box-shadow:0 0 25px 5px #000;z-index:10;}
#videoContainer {-moz-transform-origin:100% 100%;-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-o-transform-origin:100% 100%;transform-origin:100% 100%;}
#videoContainer {-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
#videoContainer div {position:absolute;}
#videoContainer div {-moz-transform-origin:0 0;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;}
#videoContainer div {-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
#videoContainer video {}

#content {position:absolute;width:100%;height:100%;top:0;left:0;}
#content {background:url(http://www.clipart-fr.com/data/wallpaper/Serie_001/fond_ecran_wallpaper_serie_00027.jpg) no-repeat;background-size:100% 100%;}

JavaScript

function racine(x){return Math.sqrt(x);}
function carre(x){return Math.pow(x, 2);}

var videoCont = document.getElementById("videoContainer"),
	videoWrap = document.querySelector("#videoContainer div"),
	video = document.querySelector("#videoContainer video"),
	content = document.getElementById("content");


var	videoRatio,
	trueBgWidth = 1600,
	trueBgHeight = 1200,
	bgRatio = trueBgHeight / trueBgWidth;

function videoDatas() {
	videoRatio = video.videoHeight / video.videoWidth;
}

function setSizes(){
	var parentWidth = videoCont.parentNode.offsetWidth,
		parentHeight = videoCont.parentNode.offsetHeight,
		rest = racine(carre(parentHeight) / 2),
		wrapHeight = racine(carre(.88 * parentWidth) / 2),
		wrapWidth = rest + wrapHeight;

	videoCont.style.width = wrapWidth + "px";
	videoCont.style.height = wrapHeight + "px";
	videoCont.style.top = "-" + wrapHeight +"px";
	
	videoWrap.style.width = (.88 * parentWidth) + "px";
	videoWrap.style.height = parentHeight + "px";
	videoWrap.style.left = rest + "px";
	
	video.style.height = parentHeight + "px";
	video.style.left = "-" + (.88 * parentWidth) + "px";
	
	if (video.offsetWidth < parentWidth) {
		video.style.height = (parentWidth * videoRatio) + "px";
	}
	
	content.style.backgroundSize = "auto " + parentHeight + "px";
	
	if (parentHeight / bgRatio < parentWidth) {
		content.style.backgroundSize = "auto " + (parentWidth * bgRatio) + "px";
	}
}


video.addEventListener("loadeddata", videoDatas, false);
window.addEventListener("resize", setSizes, false);
window.addEventListener("load", setSizes, false);