JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<body>
	<div id="wrapper">
    	<header>
    		<img class="logo" src="norefjell_logotopp.png" alt="">
    	</header>
		<div id="content">
			<iframe id="video" class="vimeo-wrapper" src="https://player.vimeo.com/video/152285223?api=1&loop=1&autoplay=1&background=1" frameborder="0"></iframe>   
            <h1>FANTASTIC</h1>
            <h2>TEXT ON THIS</h2>
            <h3>- BANNER</h3>
            <div class="button" onclick="window.open('http://www.jsfiddle.com','new_window');">Read more</div>
            <div class="btn-group">
            	<button class="play" id="play-button"><i class="fa fa-play"></i></button>
            	<button class="pause" id="pause-button"><i class="fa fa-pause"></i></button>
        	</div>
        </div>
    </div>
</body>

CSS

html, body {
			padding: 0;
			margin: 0;
			width: 100%;
			height: 100%;
			font-family: 'Roboto', sans-serif;
			color: #000;
		}
		body {
			background-color:#e6f0f1;
		}
		* {
			box-sizing: border-box;
		}
		img {
			border: none;
		}
		#wrapper {
			display: block;
			position: relative;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			overflow: hidden;
		}
		#content {
			width: 100%;
			position: relative;
			padding: 0 40px;
		}
		.logo {
			width:80%;
		}
		header {
			width: 100%;
			height: auto;
			padding:0px 10px 0px 10px;
			border-bottom:4px solid #CE3530;
			
		}
		h1, h2, h3 {
			font-weight: 900;
			margin: 10px 0px 10px 0px;
			color:#FFF;
			
		}
		
		h4{
			font-size:17px;
			color:#CE3530;
			margin-top:0px;
			padding-top:10px;
			font-weight: 500;
		}
		.button {
			display: inline-block;
			background-color: #CE3530;
			cursor: pointer;
			font-size: 22px;
			font-weight: 300;
			padding: 20px;
			margin-top:40px;
			color:#fff;
		}
		.button:hover {
			background-color: #333;
		}
		.button:after {
			content: " »";
		}
		.vimeo-wrapper {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: -1;
		}
		.btn-group{
			position: absolute;
			right:10px;
			bottom:10px;
		}
		.play, .pause{
			background:rgba(0,0,0,0.7);
			border:0px;
			color:#fff;
			border-radius: 100%;
			height:50px;
			width:50px;
		}
		@media screen and (max-width: 980px){
			
			.logo{
				width:30%;
			}
			.vimeo-wrapper{
			width:980px;
			height:400px;
			top:50%;
			}
			header{
				background:none;
				border-bottom: 0px solid #CE3530;
				position: absolute;
				bottom:0;
				right:0;
				text-align: right;
			}
			.top-text{
				position: absolute;
				bottom:-80px;
				width: 85%;
				text-align: center;
				display:none;
			}
			#content{
				height:182px;
			}
			h1{
				margin-top:45px;
				font-size: 50px;
			}
			h2{
				font-size: 40px;
			}
			h3{
				font-size: 30px;
			}
			.button...

JavaScript

var iframe = document.getElementById('video');
		// $f == Froogaloop
		var player = $f(iframe);
		// bind events
		var playButton = document.getElementById("play-button");
		playButton.addEventListener("click", function() {
		  player.api('play');
		  console.log('Played video');
		});
		var pauseButton = document.getElementById("pause-button");
		pauseButton.addEventListener("click", function() {
		  player.api("pause");
		  console.log('Paused video');
		});