Como exibir um vídeo no modal de login da moda?

Suporte
1

@meghna Obrigado por este componente!
Funciona como esperado no desktop, mas o vídeo (canal do YouTube) não aparece no celular (navegadores Chrome, Edge) no iPhone XR (pelo menos).
Alguma ideia de como consertar isso?
Obrigado!
P.S. Na captura de tela, o espaço em branco acima do botão de login deveria ser o vídeo…

IMG_2966.PNG
IMG_2966.PNG828×1792 117 KB

1 curtida
2

Resolvido incorporando vídeo do YouTube alterando um pouco o HTML.
Adicionar CSS ajudou a ter o vídeo no celular.

2 curtidas
3

Você pode compartilhar seu hack aqui?

2 curtidas
4

@tobiaseigen com certeza!
HTML dentro do componente no meu caso (preste atenção em “EMBED” no Link do YouTube):

<p>Junte-se exclusivamente ao StarCohort, trilhando o Caminho EuroTiger da UA, em sincronia global 🌍. Escale em seguida.</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 (cole dentro do Componente), no meu caso:

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    padding-top: 30px; /* Algum preenchimento no topo para evitar sobreposição de conteúdo */
    height: 0;
    overflow: hidden;
}

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

Espero que isso ajude alguém)

3 curtidas