JSFiddle - React, Tailwind, and code Playground

by Gloak

HTML

<body>
	<div class="wrapper">
        <div class="header">
                
                
                <nav>
                
                <a href="http://braaasil.com/mysite/indexVideo.html">Video</a> 
                <a href="cnn.com/">Blog</a> 
                <a href="/js/">Glob</a> 
                <a href="/jquery/">Lgob</a>
                
                <a href="/jquery/">Contact</a>
                </nav>
        
        </div>
        <div class="out-video">
                <video  autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%">
                <source src="video/mel.webm" type="video/webm">
                <source src="video/mel.mp4" type="video/mp4" >
                </video>
        
                <div class="main_text">
                
                </div>
        </div>
    </div>

CSS

@charset "utf-8";
/* CSS Document */
html, body {width:100%;
height:100%}
.wrapper {width:100%;
height:100%}
.out {
	position:relative;
	background-image: url(../images/melissa.JPG);
	 background-repeat: no-repeat;
    background-size: 100% 100%;
height:100%;
	width:100%;
	color:red;
 }
.out-video {
	
	position: relative;  
	min-width:100% !important; 
	height:82% !important; 
	z-index: -1;margin:0;padding:0; 
	}
	

.header {height:15%;
	position:relative;
	background-color:black;
	border-bottom:solid;
	border-bottom-width:10px;
	border-bottom-color:#777
	}
button {
	position: relative;
	left:75%;
	top:15%;}
	
nav {
	position:absolute;
	bottom:0;
	left:15%}
nav a {
	font-variant:small-caps;
	font-size:24px;
	font-weight:bold;
	padding:10px;
	text-decoration:none;
	color:white;
	position:relative;
}
.main_text {
	color: white;
	font-size:76px;
	font-variant:small-caps;
	position:absolute;
	right:15%;
	top:30%;
}

video#bgvid {
position: absolute;

z-index: 0; 
background: url(mel.jpg) no-repeat;
background-size: 100% 100%;
}
video { display: block; }