CSS styling for dynamic video grid only shows fullscreen video

I tried programming a small interactive Website to show some Videos and Pictures in a dynamic grid. So far, the grid for the pictures works (mostly) like I want and shows all pictures in a grid.

However if I try the same thing for my Videos, I only get showed the first Video in giant.

I want to be able to open the Video in fullscreen when I click it, and I thought maybe that had something to do with why I only see one.

I’ve tried to change up the CSS, and also tried it without the JS, but neither have worked. I don’t know if I did something wrong or my thought process is wrong.

function openFullscreenVideo(video) {
  const overlay = document.createElement('div');
  overlay.className="fullscreen-overlay";

  const closeButton = document.createElement('button');
  closeButton.className="close-button";
  closeButton.innerHTML = 'Schließen';
  closeButton.onclick = function() {
    closeFullscreen(overlay);
  };

  const fullscreenVideo = document.createElement('video');
  fullscreenVideo.src = video.src;
  fullscreenVideo.controls = true;
  fullscreenVideo.autoplay = true;
  fullscreenVideo.muted = true;
  fullscreenVideo.style.maxWidth="90%";
  fullscreenVideo.style.maxHeight="90%";

  const fullScreenButton = document.createElement('button');
  fullScreenButton.innerHTML = 'Vollbild';
  fullScreenButton.onclick = function() {
    if (fullscreenVideo.requestFullscreen) {
      fullscreenVideo.requestFullscreen();
    } else if (fullscreenVideo.mozRequestFullScreen) {
      fullscreenVideo.mozRequestFullScreen();
    } else if (fullscreenVideo.webkitRequestFullscreen) {
      fullscreenVideo.webkitRequestFullscreen();
    } else if (fullscreenVideo.msRequestFullscreen) {
      fullscreenVideo.msRequestFullscreen();
    }
  };

  fullscreenVideo.onended = function() {
    closeFullscreen(overlay);
  };

  overlay.appendChild(closeButton);
  overlay.appendChild(fullscreenVideo);
  overlay.appendChild(fullScreenButton);
  document.body.appendChild(overlay);
}

function closeFullscreen() {
  const fullscreenImage = document.getElementById('fullscreen-image');
  const fullscreenVideo = document.getElementById('fullscreen-video');
  if (fullscreenImage) {
    document.body.removeChild(fullscreenImage);
  }
  if (fullscreenVideo) {
    document.body.removeChild(fullscreenVideo);
  }
  document.body.style.overflow = 'auto';
}

/* Stil für die Videos im Grid */

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
  padding: 10px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

.video-grid video {
  width: 100%;
  height: auto;
  border-radius: 8px;
}


/* Stil für das fullscreen Overlay */

.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.fullscreen-overlay video {
  max-width: 90%;
  max-height: 90%;
}

<div class="container">
  <div id="videos" class="content">
    <div class="video-grid">
      <video src="./Videos/video1.mp4" alt="Video 1" onclick="openFullscreenVideo(this)" controls></video>
      <video src="./Videos/video2.mp4" alt="Video 2" onclick="openFullscreenVideo(this)" controls></video>
      <video src="./Videos/video3.mp4" alt="Video 3" onclick="openFullscreenVideo(this)" controls></video>
    </div>
  </div>
</div>

You need to sign in to view this answers

Related Post