.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Співвідношення сторін 16:9 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.top-overlay,
.bottom-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  background: rgba(255, 0, 0, 0); /* Повністю прозорий колір */
  z-index: 2; /* Плашка поверх відео */
}

.top-overlay {
  top: 0;
  height: 4rem; /* Висота верхньої плашки */
}

.bottom-overlay {
  bottom: 0;
  height: 3rem; /* Висота нижньої плашки */
}

/* Важлива частина */
.top-overlay,
.bottom-overlay {
  pointer-events: all; /* Дозволяємо плашкам взаємодіяти з кліками */
}

.video-container iframe {
  pointer-events: auto; /* Дозволяємо клікам проходити через iframe */
}

/* Додатково блокуємо кліки на iframe тільки там, де немає плашок */
.video-container {
  pointer-events: none; /* Блокуємо кліки на всьому контейнері */
}

.video-container iframe {
  pointer-events: auto; /* Але дозволяємо кліки на iframe */
}

.top-overlay,
.bottom-overlay {
  pointer-events: auto; /* Знову блокуємо кліки на плашках */
}