title: How to activate fullscreen on custom video player
body: <p>I have got a basic video player, but when you toggle fullscreen then it goes into full screen, but it doesn't fill the screen.</p>
  
  <p>I have googled for a solution but nothing has helped. I have even tried <code>.fullscreen{width:100%}</code>, but nothing has changed.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div class='player-container'&gt;
      &lt;div class='galaxy-player'&gt;
      &lt;video id='video' src='../videoplayer/red.mp4' autoplay playsinline&gt;&lt;/video&gt;
          &lt;div class='play-btn-big'&gt;&lt;/div&gt;
          &lt;div class='controls'&gt;
              &lt;div class="time"&gt;&lt;span class="time-current"&gt;&lt;/span&gt;&lt;span class="time-total"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class='progress'&gt;
                  &lt;div class='progress-filled'&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class='controls-main'&gt;
                  &lt;div class='controls-left'&gt;
                      &lt;div class='volume'&gt;
                          &lt;div class='volume-btn loud'&gt;
                              &lt;svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
                                  &lt;path d="M6.75497 17.6928H2C0.89543 17.6928 0 16.7973 0 15.6928V8.30611C0 7.20152 0.895431 6.30611 2 6.30611H6.75504L13.9555 0.237289C14.6058 -0.310807 15.6 0.151473 15.6 1.00191V22.997C15.6 23.8475 14.6058 24.3098 13.9555 23.7617L6.75497 17.6928Z" transform="translate(0 0.000518799)" fill="white"/&gt;
                                  &lt;path id="volume-low" d="M0 9.87787C2.87188 9.87787 5.2 7.66663 5.2 4.93893C5.2 2.21124 2.87188 0 0 0V2C1.86563 2 3.2 3.41162 3.2 4.93893C3.2 6.46625 1.86563 7.87787 0 7.87787V9.87787Z" transform="translate(17.3333 7.44955)" fill="white"/&gt;
  
                                  &lt;path id="volume-high" d="M0 16.4631C4.78647 16.4631 8.66667 12.7777 8.66667 8.23157C8.66667 3.68539 4.78647 0 0 0V2C3.78022 2 6.66667 4.88577 6.66667 8.23157C6.66667 11.5773 3.78022 14.4631 0 14.4631V16.4631Z" transform="translate(17.3333 4.15689)" fill="white"/&gt; 
                          &lt;path id="volume-off" d="M1.22565 0L0 1.16412L3.06413 4.0744L0 6.98471L1.22565 8.14883L4.28978 5.23853L7.35391 8.14883L8.57956 6.98471L5.51544 4.0744L8.57956 1.16412L7.35391 0L4.28978 2.91031L1.22565 0Z" transform="translate(17.3769 8.31403)" fill="white"/&gt;
                              &lt;/svg&gt;
  
                          &lt;/div&gt;
                          &lt;div class='volume-slider'&gt;
                              &lt;div class='volume-filled'&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class='play-btn paused'&gt;&lt;/div&gt;
                  &lt;div class="controls-right"&gt;
                      &lt;div class='speed'&gt;
                          &lt;ul class='speed-list'&gt;
                              &lt;li class='speed-item' data-speed='0.5'&gt;0.5x&lt;/li&gt;
                              &lt;li class='speed-item' data-speed='0.75'&gt;0.75x&lt;/li&gt;
                              &lt;li class='speed-item' data-speed='1' class='active'&gt;1x&lt;/li&gt;
                              &lt;li class='speed-item' data-speed='1.5'&gt;1.5x&lt;/li&gt;
                              &lt;li class='speed-item' data-speed='2'&gt;2x&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class='fullscreen'&gt;
                          &lt;svg width="30" height="22" viewBox="0 0 30 22" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;path d="M0 0V-1.5H-1.5V0H0ZM0 18H-1.5V19.5H0V18ZM26 18V19.5H27.5V18H26ZM26 0H27.5V-1.5H26V0ZM1.5 6.54545V0H-1.5V6.54545H1.5ZM0 1.5H10.1111V-1.5H0V1.5ZM-1.5 11.4545V18H1.5V11.4545H-1.5ZM0 19.5H10.1111V16.5H0V19.5ZM24.5 11.4545V18H27.5V11.4545H24.5ZM26 16.5H15.8889V19.5H26V16.5ZM27.5 6.54545V0H24.5V6.54545H27.5ZM26 -1.5H15.8889V1.5H26V-1.5Z" transform="translate(2 2)" fill="white"/&gt;
      &lt;/svg&gt;
  
      &lt;/svg&gt;
  
  
      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.player-container {
      color: #fff;
      background: #191919;
  margin: -17px 0 40px;
  padding: 15px 0;
  height: 950px;
  
  
  }
  .galaxy-player {
      margin: 0 auto;
      width: 900px;
  }
  .galaxy-player:fullscreen {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  .galaxy-player:-webkit-full-screen {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  .galaxy-player:-moz-full-screen {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  .galaxy-player:-ms-fullscreen  {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;  
  }
  .galaxy-player video {
      width: 100%;
      margin-top: 200px;
  /*     height: auto; */
  /*     position: absolute; */
  /*     top: 50%; */
  /*     transform: translateY(-50%); */
    display: block;
  }
  
  .controls {
    margin: 0 auto;
    padding: 0;
    position: absolute;
    bottom: 263px;
    width: 900px;
    height: 48px;
    box-sizing: border-box;
    background: linear-gradient(180deg,rgba(37, 37, 37, 0) 10%,rgba(37, 37, 37, 0.6) 80%);
    transition: all 0.2s ease-in 5s;
  }
  .galaxy-player video:fullscreen {
      width: 100vw;
  }
  .galaxy-player .controls:fullscreen {
      width: 100vw;
  }
  .galaxy-player video:-webkit-full-screen {
      width: 100vw;
  }
  .galaxy-player .controls:-webkit-full-screen {
      width: 100vw;
  }
  .galaxy-player video:-moz-full-screen {
      width: 100vw;
  }
  .galaxy-player .controls:-moz-full-screen {
      width: 100vw;
  }
  .galaxy-player video:-ms-fullscreen {
      width: 100vw;
  }
  .galaxy-player .controls:-ms-fullscreen {
      width: 100vw;
  }
  .player:hover .controls {
      bottom: 0;
      transition: all 0.2s ease-out;
  }
  .time {
      position: absolute;
      right: 30px;
      bottom: 100%;
      padding-bottom: 14px;
  }
  .progress {
      height: 8px;
      width: calc(100% - 40px);
      background: rgba(60, 60, 60, 0.6);
      margin: auto;
      border-radius: 6px;
      position: absolute;
      left: 20px;
      bottom: 100%;
      transition: height 0.1s ease-in-out;
  }
  .progress:hover {
      height: 10px;
  }
  .progress-filled {
      background: #ff0000;
      width: 0%;
      height: 100%;
      border-radius: 6px;
      transition: all 0.1s; 
  }
  .controls-main {
      width: calc(100% - 40px);
      margin: auto;
      height: 100%;
      display: flex;
      justify-content: space-between;
  }
  .controls-left,
  .controls-right {
      flex: 1;
      display: flex;
      align-items: center;
      overflow: hidden;
  }
  .controls-left {
      margin-left: 10px;
  }
  .controls-right {
      margin-right: 10px;
      justify-content: flex-end;
  }
  .volume {
      display: flex;
      align-items: center;
  }
  .volume-btn {
      margin-right: 10px;
  }
  .volume-btn #volume-off, .volume-btn #volume-high {
      opacity: 0;
  }
  .volume-btn.loud #volume-high{
      opacity: 1;
  }
  .volume-btn.muted #volume-off {
      opacity: 1;
  }
  .volume-btn.muted #volume-high, .volume-btn.muted #volume-low {
      opacity: 0;
  }
  .volume-slider {
      height: 8px;
      width: 80px;
      background: rgba(60, 60, 60, 0.6);;
      border-radius: 6px;
      position: relative;
  }
  .volume-filled {
      background: var(--main);
      width: 100%;
      height: 100%;
      border-radius: 6px;
      transition: width 0.2s ease-in-out;
  }
  .volume-filled:hover, .play-btn:hover.play-btn:before, .play-btn:hover.play-btn:after{
      background: var(--accent);
  }
  button {
  }
  .play-btn {
      width: 30px;
      height: 30px;
      position: relative;
      margin: auto;
      transform: rotate(-90deg) scale(0.8);
      transition: -webkit-clip-path 0.3s ease-in 0.1s, shape-inside 0.3s ease-in 0.1s,
          transform 0.8s cubic-bezier(0.85, -0.25, 0.25, 1.425);
  }
  .play-btn.paused {
      transform: rotate(0deg);
  }
  .play-btn:before,
  .play-btn:after {
      content: "";
      position: absolute;
      background: white;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transition: inherit;
  }
  .play-btn:before {
      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
      shape-inside: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
  }
  .play-btn:after {
      -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
      shape-inside: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
  }
  .play-btn.paused:before {
      -webkit-clip-path: polygon(10% 0, 90% 51%, 90% 51%, 10% 51%);
      shape-inside: polygon(0 0, 100% 51%, 100% 51%, 0 51%);
  }
  .play-btn.paused:after {
      -webkit-clip-path: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
      shape-inside: polygon(10% 49.5%, 80% 49.5%, 90% 49.5%, 10% 100%);
  }
  button:focus {
      outline: none;
  }
  .speed-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      margin-right: 20px;
      text-align: center;
  }
  .speed-list li {
      color: var(--main);
      padding: 5px;
      cursor: default;
  }
  .speed-list li:hover,
  .speed-list li.active {
      color: var(--accent);
      font-weight: bold;
  }
  .fullscreen {
      display: flex;
      justify-content: center;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>//ELEMENT SELECTORS
  var player = document.querySelector('.galaxy-player');
  var video = document.querySelector('#video');
  var playBtn = document.querySelector('.play-btn');
  var volumeBtn = document.querySelector('.volume-btn');
  var volumeSlider = document.querySelector('.volume-slider');
  var volumeFill = document.querySelector('.volume-filled');
  var progressSlider = document.querySelector('.progress');
  var progressFill = document.querySelector('.progress-filled');
  var textCurrent = document.querySelector('.time-current');
  var textTotal = document.querySelector('.time-total');
  var speedBtns = document.querySelectorAll('.speed-item');
  var fullscreenBtn =document.querySelector('.fullscreen'); 
  
  //GLOBAL VARS
  let lastVolume = 1;
  let isMouseDown = false;
  
  //PLAYER FUNCTIONS
  function togglePlay() {
      if (video.paused) {
          video.play();
      } else {
          video.pause();  
      }
      playBtn.classList.toggle('paused');
  }
  function togglePlayBtn() {
      playBtn.classList.toggle('playing');
  }
  
  function toggleMute() {
      if(video.volume) {
          lastVolume = video.volume;
          video.volume = 0;
          volumeBtn.classList.add('muted');
          volumeFill.style.width = 0;
      } else {
          video.volume = lastVolume;
          volumeBtn.classList.remove('muted');
          volumeFill.style.width = `${lastVolume*100}%`;
      }
  }
  function changeVolume(e) {
          volumeBtn.classList.remove('muted');
          let volume = e.offsetX/volumeSlider.offsetWidth;
          volume&lt;0.1 ? volume = 0 : volume=volume; 
          volumeFill.style.width = `${volume*100}%`;
          video.volume = volume;
          if (volume &gt; 0.7) {
              volumeBtn.classList.add('loud');
          } else if (volume &lt; 0.7 &amp;&amp; volume &gt; 0) {
              volumeBtn.classList.remove('loud');
          } else if (volume == 0) {
              volumeBtn.classList.add('muted');
          }
          lastVolume = volume;
  }
  function neatTime(time) {
    // var hours = Math.floor((time % 86400)/3600)
    var minutes = Math.floor((time % 3600)/60);
    var seconds = Math.floor(time % 60);
      seconds = seconds&gt;9?seconds:`0${seconds}`;
      return `${minutes}:${seconds}`;
  }
  function updateProgress(e) {
      progressFill.style.width = `${video.currentTime/video.duration*100}%`;
      textCurrent.innerHTML = `${neatTime(video.currentTime)} / ${neatTime(video.duration)}`;
      // textTotal.innerHTML = neatTime(video.duration);
      // console.log(progressFill.style.width);
  }
  function setProgress(e) {
      const newTime = e.offsetX/progressSlider.offsetWidth;
      progressFill.style.width = `${newTime*100}%`;
      video.currentTime = newTime*video.duration;
  }
  function launchIntoFullscreen(element) {
    if(element.requestFullscreen) {
      element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if(element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if(element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
  function exitFullscreen() {
    if(document.exitFullscreen) {
      document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
  var fullscreen = false;
  function toggleFullscreen() {
      fullscreen? exitFullscreen() : launchIntoFullscreen(player)
      fullscreen = !fullscreen;
  }
  function setSpeed(e) {
      console.log(parseFloat(this.dataset.speed));
      video.playbackRate = this.dataset.speed;
      speedBtns.forEach(speedBtn =&gt;   speedBtn.classList.remove('active'));
      this.classList.add('active');
  }
  function handleKeypress(e) {
      switch (e.key) {
          case " ":
              togglePlay();
          case "ArrowRight":
              video.currentTime += 5;
          case "ArrowLeft":
              video.currentTime -= 5;
          default:
              return;
      }
  }
  //EVENT LISTENERS
  playBtn.addEventListener('click', togglePlay);
  video.addEventListener('click', togglePlay);
  video.addEventListener('play', togglePlayBtn);
  video.addEventListener('pause', togglePlayBtn);
  video.addEventListener('ended', togglePlayBtn);
  video.addEventListener('timeupdate', updateProgress);
  video.addEventListener('canplay', updateProgress);
  volumeBtn.addEventListener('click', toggleMute);
  window.addEventListener('mousedown', () =&gt; isMouseDown = true)
  window.addEventListener('mouseup', () =&gt; isMouseDown = false)
  // volumeSlider.addEventListener('mouseover', changeVolume);
  volumeSlider.addEventListener('click', changeVolume);
  progressSlider.addEventListener('click', setProgress);
  fullscreenBtn.addEventListener('click', toggleFullscreen);
  speedBtns.forEach(speedBtn =&gt; {
      speedBtn.addEventListener('click', setSpeed);
  })
  window.addEventListener('keydown', handleKeypress);
  </code></pre>
  
  <p>Here is a screenshot of the fullscreen:
  <a href="https://imgur.com/8XiaeRC" rel="nofollow noreferrer">https://imgur.com/8XiaeRC</a></p>
  
  <p>Any help appreciated and thanks in advance.</p>
  
  <p>P.S Video used is for placeholder references only.</p>