Comment afficher une vidéo sur la modale de connexion tendance ?

Soutien
1

@meghna Merci pour ce composant !
Il fonctionne comme prévu sur ordinateur, mais
la vidéo (chaîne YouTube) n’apparaît pas sur mobile (navigateurs Chrome, Edge) sur iPhone XR (du moins).
Avez-vous des idées sur la façon de résoudre ce problème ?
Merci !
P.S. Sur la capture d’écran, l’espace vide au-dessus du bouton de connexion devrait appartenir à la vidéo…

IMG_2966.PNG
IMG_2966.PNG828×1792 117 KB

1 « J'aime »
2

Résolu en intégrant une vidéo de YouTube en modifiant légèrement le HTML. L’ajout de CSS a permis d’afficher la vidéo sur mobile.

2 « J'aime »
3

Pouvez-vous partager votre astuce ici ?

2 « J'aime »
4

@tobiaseigen bien sûr !
HTML à l’intérieur du composant dans mon cas (faites attention à « EMBED » dans le lien YouTube) :

<p>Rejoignez exclusivement le StarCohort, en suivant le chemin EuroTiger de UA, en synchronisation mondiale 🌍. Passez à l'échelle supérieure.</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 (collez à l’intérieur du composant), dans mon cas :

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Ratio d'aspect 16:9 */
    padding-top: 30px; /* Un peu de marge en haut pour éviter le chevauchement du contenu */
    height: 0;
    overflow: hidden;
}

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

J’espère que cela aidera quelqu’un)

3 « J'aime »