JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>landing_page</title>
        <link href="styling.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div class="wrapper">
            <div class="landing">
                <div class="main_logo"></div>
                <div class="vid_wrap">
                    <video id="bgvid" width="100%" height="100%" preload="true" autoplay loop muted>
                        <!-- replace **image link** with your own file -->
                        <source src="../Luke Portfolio 2/factormedia.co.za/videos/main.mp4" />
                    </video>
                </div>
            </div>
        </div>
    </body>

</html>

CSS

@charset "utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
	margin:0 auto;
    background:#171717;
	font-family: 'Roboto', sans-serif;
	color:#CCC;
	overflow-y: scroll;
	overflow-x: hidden;
} 
html, body {
    height: 100%;
}
a{
    color:#000;
    transition:300ms;
}
a:hover {
    color:#000;
}
a:link {
    text-decoration: none;
}
/*-------------------------------------------------------- Default Layout ----------------------------------------------------------------------------------------------------------------*/
.wrapper{
    display: table;
    width: 100%;
    min-height: 100%;
    position: relative;
}
.main_logo{
    background:#000;
	position:relative;
	float:left;
	width:300px;
	height:200px;
	z-index:2000;
    display: block;
    margin: auto;
}
.vid_wrap {
	position:absolute;
	overflow:hidden;
	width:auto;
	height:auto;
	background-size:cover;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
	z-index:1;
}