У меня есть модальный css, который отображает видео. Видео воспроизводится при нажатии на пустую область, где оно будет отображаться

Question

Я пробовал несколько решений, но безуспешно.

Вот упрощенная страница, демонстрирующая проблему.

Answer 1

Я починил это.

Я нашел решение после того, как нашел похожую проблему со страницей, используя столбцы html5. Модалы будут работать в первом столбце, но не во втором. Я обнаружил, что модальная статическая позиция перекрывает позицию изображения ссылки во втором столбце, хотя она не была видна.

В исходной задаче я изменил CSS из:

   #modal1{
    position: absolute;
    margin-left: -20%;
    padding: 20px;
    opacity: 0;
    width: 40%;
    top: 100px;
    left: 50%;

}

#modal1:target {
    opacity: 1;
}

К этому:

#modal1{
    position: absolute;
    margin-left: -20%;
    padding: 20px;
    opacity: 0;
    width: 40%;
    top: 100px;
    left: -1000px;

}

#modal1:target{
   position: absolute;
   margin-left: -20%;
   padding: 20px;
   opacity: 1;
   width: 40%;
   top: 100px;
   left: 50%;

}

Теперь модальная статическая позиция находится далеко от страницы и больше не там, где ее можно щелкнуть.

Я понимаю, что это был беспорядок, но я наконец получил это.

Рой