Chodzi mi o to by w białym tle ekranu monitora było video i podczas zmniejszania okna te video się zmniejszało proporcjonalnie razem z ekranem :)

body{
width:100%;
height:500vh;
margin:0;
}
.header,.footer{
position:fixed;
width:100%;
height:8vh;
background-color:rgb(0, 0, 0);
z-index: 100;
}
.footer{
position:absolute;
top: 493vh;
}
.face,.twitter,.mail{
width: 5vh;
height: 0.5vh;
float:left;
margin-left:3vh;
margin-top:1.5vh;
}
.face:hover,.twitter:hover,.mail:hover{
float:left;
margin-left:3vh;
margin-top:1.5vh;
border:0.2vh solid aqua;
border-radius: 10%;
width:5vh;
height:5vh;
}
.home,.o_mnie,.oferta,.realizacje,.portfolio{
color:white;
float: right;
margin-right: 5%;
line-height: 8vh;
font-family: 'Anton', sans-serif;
letter-spacing: 0.2vh;
}
.home:hover,.o_mnie:hover,.oferta:hover,.realizacje:hover,.portfolio:hover{
color:rgb(228, 24, 24);
float: right;
margin-right: 5%;
line-height: 8vh;
font-family: 'Anton', sans-serif;
letter-spacing: 0.2vh;
}
.sector{
width: 14%;
height: 94vh;
background-color: rgb(52, 143, 185);
float: left;
margin-left:0%;
margin-top:7vh;
margin-right:0;
animation: section_with_left 1s;
animation-iteration-count: 1;
}
@keyframes section_with_left{
0% {margin-left: -14%;}
100% {margin-left: 0%;}
}
.daro_foto{
width:50%;
height:16vh;
float: left;
margin-left:6.3vh;
margin-top:5vh;
background-image: url("./daro.jpg");
background-size: 100% 100%;
border-radius: 100%;
filter: brightnes:100%);
transform:rotate(360deg);
border:solid 0.01vh rgb(241, 247, 248);
animation:darek_kreci 1s;
}
@keyframes darek_kreci {
0% {transform:rotate(0deg); margin-left:-70vh;}
100% {transform:rotate(360deg);}
}
.write_darek{
width:59%;
height: 9vh;
float: left;
margin-top:2vh;
margin-left: 5.5vh;
line-height: 4vh;
color:white;
clear: both;
font-family: 'Anton', sans-serif;
font-size:2vh;
text-align: center;
letter-spacing:0.3vh;
}
.junior_front_developer{
width: 80%;
height: 8vh;
float: left;
margin-top:51vh;
margin-left: 3vh;
clear: both;
font-size:2vh;
letter-spacing: 0.2vh;
text-align: center;
color:white;
font-family: 'Anton', sans-serif;
}
.site_web{
width: 23%;
height:5vh;
position:absolute;
line-height: 5vh;
top:22vh;
left:45vh;
font-size:3.9vh;
padding-left: 0.7vh;
text-align: center;
font-family: 'Anton', sans-serif;
letter-spacing:1vh;
color:rgb(92, 88, 88);
}
.monitor{
width:35%;
height: 60vh;
background-image: url("./monitor.jpg");
background-size:100% 100%;
position:absolute;
left: 53%;
top:25vh;
padding: 2.93vh;
padding-left:3.1vh;
}
.video-wrapper{
position: relative;
padding-bottom:56.25%;
}
video{
position: absolute;
width: 100%;
height: 100%;
}
x.mail_phone{
width: 15%;
height: 13vh;
float: left;
margin-top:2vh;
margin-left: 5vh;
clear: both;
font-size:2.3vh;
text-align: center;
letter-spacing:0.1vh;
}
x.e-mail{
float: left;
clear: both;
margin-top: 2vh;
font-size:2.2vh;
margin-left: 1vh;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" ></script>
<script src="jquery.js"></script>
<script src="scripts.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bowlby+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="face"> <img src="face.png" style="widht:5vh; height:5vh; "></div>
<div class="twitter"> <img src="twitter.png" style="widht:5vh; height:5vh; "></div>
<div class="mail"> <img src="mail.png" style="widht:5vh; height:5vh; "></div>
<div class="home">HOME</div>
<div class="o_mnie">O MNIE</div>
<div class="oferta">OFERTA</div>
<div class="realizacje">REALIZACJE</div>
<div class="portfolio">PORTFOLIO</div>
</div>
<div class="sector">
<div class="daro_foto"> </div>
<div class="write_darek">DARIUSZ HOZER</div>
<div class="junior_front_developer" >Junior Front-End Developer / Freelancer</div>
</div>
<!--zastanowić się gdzie wpieprzyć te kontakty
div class="contact">KONTAKT</div><br><div class="mail_phone">
<b>telefon:</b><br> 535 312 833<br<div class="e-mail"><b>e-mail:</b><br> wytycznedlastron@gmail.com<br></div></br></div>
<div class="blue_straight"></div>
to będzie wyzwanie -->
<!--napis
<div class="site_web">WITAM NA MOIM PORTFOLIO</div>
-->
<div class="monitor">
<div class="video-wrapper">
<video controls autoplay loop >
<source src="videoplayback.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="footer"></div>
</body>
</html>