Что требуется, чтобы видео Youtuve воспроизводилось на веб-сайте

Question

Что требуется для воспроизведения видео на Youtube на странице сайта? У меня есть веб-сайт, и на одной странице видео с YouTube воспроизводится нормально, но на другой странице такое же видео не воспроизводится.

На странице, которая работает при наведении курсора на кнопку воспроизведения, она меняется с черного на красный.

На странице не работает кнопка воспроизведения не меняет своего внешнего вида при наведении на нее курсора.

Когда я нажимаю кнопку воспроизведения на странице, которая не работает, ничего не происходит.

Мой сайт создан с использованием Coldfusion

Answer 1

Может кто-нибудь объяснить, почему следующие проблемы решили мою проблему.

На странице, которая не работала, код, который использовался для отображения видео с YouTube, выглядит следующим образом:

<p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true">
<iframe width="640" height="360" src="https://www.youtube.com/embed/ztr-AS-xkDQ?wmode=transparent" frameborder="0" allowfullscreen="" class="fr-draggable"></iframe>
</span></p>

На странице, которая работала, код .... не был окружен классом fr-video.

Я обнаружил, что в одной из таблиц стилей она содержала следующее, которое использовалось только на странице, которая не работала:

.fr-element .fr-video::after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  display: block;
  background: rgba(0, 0, 0, 0);
}

Если я удалил:

bottom: 0;

затем видео с YouTube загрузилось нормально и воспроизводилось.

Может кто-нибудь объяснить, почему это решило мою проблему