Как отобразить видео в модальном окне входа в трендовом стиле?

Поддержка
1

@meghna Спасибо за этот компонент!
Работает как ожидалось на десктопе, но
видео (канал YouTube) не отображается на мобильных устройствах (браузеры Chrome, Edge) на iPhone XR (по крайней мере).
Есть ли какие-то идеи, как это исправить?
Спасибо!
P.S. На скриншоте пустое пространство над кнопкой «Войти» должно быть занято видео…

IMG_2966.PNG
IMG_2966.PNG828×1792 117 KB

2

Решено путём встраивания видео с YouTube с небольшими изменениями в HTML.
Добавление CSS помогло отобразить видео на мобильных устройствах.

3

Можешь поделиться своим хакерским приемом здесь?

4

@tobiaseigen конечно!
HTML внутри компонента в моём случае (обратите внимание на “EMBED” в ссылке YouTube):

<p>Присоединяйтесь исключительно к StarCohort, проходя путь UA EuroTiger, в глобальной 🌍 синхронизации. Масштабируйтесь дальше.</p> 
<p class="center-aligned-element">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QKLAKLp7bDw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>

CSS (вставьте внутри компонента), в моём случае:

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Соотношение сторон 16:9 */
    padding-top: 30px; /* Небольшой отступ сверху, чтобы избежать наложения контента */
    height: 0;
    overflow: hidden;
}

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

Надеюсь, это поможет кому-нибудь