Стиль CSS для динамической сетки видео отображает только полноэкранное видео. ⇐ CSS

[Anonymous]

Я попробовал создать небольшой интерактивный веб-сайт, на котором видео и изображения будут отображаться в динамической сетке. Пока что сетка для изображений работает (в основном) так, как я хочу, и показывает все изображения в сетке.
Однако, если я попробую то же самое для своих видео, мне покажутся только первое видео в гигантском размере.
Я хочу иметь возможность открывать видео в полноэкранном режиме, когда я нажимаю на него, и я подумал, что, возможно, это как-то связано с тем, почему я вижу только одно видео. p>
Я пытался изменить CSS, а также пробовал без JS, но ни то, ни другое не сработало. Я не знаю, сделал ли я что-то не так или мой мыслительный процесс неверен.

Код: Выделить всё

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%;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/790 ... reen-video