html {
  height: 100%;
}
body {
  height: 100%;
  color: white;
}
#header-container {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*z-index: -500;*/
}
#header-container video,
#header-fallback {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#header-video-container:after {
  /* video texture overlay - set to 1 z-index above video */
  content: "";
  background-image: url(../media/img/video-overlay-dot-large.png);
  background-size: 3px 3px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* header video pause button */
#play-pause {
  /*background-color: #50A1CB; /* button color */
  color: white; /* text/arrow color */
  /*display: none;*/
  z-index: 999;
  /* float in bottom right corner */
  /* 20 pixels from edge */
  position: absolute;
  right: 50px;
  top: 50%;
  /* size of button is 50 pixels*/
  width: 50px;
  height: 50px;
  opacity: 0.5;
  transition: 0.6s all;
}
#play-pause:hover {
  opacity: 1;
}
a#play-pause {
  line-height: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 3em;
  text-align: center;
}
#header-text {
  position: relative;
  top: 50%;
  left: 0;
  margin-right: 100px;
  margin-left: 10%;
  z-index: 200;
}
#header-logo {
  width: 100%;
  max-width: 200px;
  height: auto;
}
@media only screen and (max-width: 768px) {
  /* media query to change header text size on lower resolutions to improve layout support */
  #header-logo {
    max-width: 100px !important;
  }
  #header-text {
    top: 40% !important;
  }
}
div.dummy {
  min-height: 100vh;
  color: black;
}























<header id="header-container" role="banner">
<div class="top-image test-top"></div>
<div id="header-video-container" class="zoom">
  <img id="header-fallback" src="yourimage.jpg" alt="" />
  <video id="header-video" controls autoplay loop muted pauseinline width="1280" height="720" role="img">
          <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
      </video>
</div>
<a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fas fa-pause"></i></a>
</header>

var playPauseBtn = document.getElementById("play-pause");
var player = document.getElementById("header-video");
player.removeAttribute("controls");
playPauseBtn.onclick = function() {
if (player.paused) {
  player.play();
  this.innerHTML = '<i class="fas fa-pause"></i>';
} else {
  player.pause();
  this.innerHTML = '<i class="fas fa-play"></i>';
}
};

#header-container {
position: relative;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
/*z-index: -500;*/
}
#header-container video,
#header-fallback {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#header-video-container:after {
/* video texture overlay - set to 1 z-index above video */
content: "";
background-image: url(../media/img/video-overlay-dot-large.png);
background-size: 3px 3px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* header video pause button */
#play-pause {
/*background-color: #50A1CB; /* button color */
color: white; /* text/arrow color */
/*display: none;*/
z-index: 999;
/* float in bottom right corner */
/* 20 pixels from edge */
position: absolute;
right: 50px;
top: 50%;
/* size of button is 50 pixels*/
width: 50px;
height: 50px;
opacity: 0.5;
transition: 0.6s all;
}
#play-pause:hover {
opacity: 1;
}
a#play-pause {
line-height: 50px;
text-decoration: none;
font-weight: 600;
font-size: 3em;
text-align: center;
}

Hey guys I need to create a video div. That video should be full screen height in desktop and in mobile it should be in it's exact width and height ( not full screen height ). I did code for desktop but i can't do anything in mobile. Can you guys help with css. I have attached my code above. Thanks.