Come visualizzare un video nella modale di login di tendenza?

Supporto
1

@meghna Grazie per questo componente!
Funziona come previsto sul desktop, ma
il video (canale YouTube) non appare sui dispositivi mobili (browser Chrome, Edge) su iPhone XR (almeno).
Qualche idea su come risolvere questo problema?
Grazie!
P.S. Nello screenshot, lo spazio vuoto sopra il pulsante di accesso dovrebbe appartenere al video…

IMG_2966.PNG
IMG_2966.PNG828×1792 117 KB

1 Mi Piace
2

Risolto incorporando video da YouTube modificando leggermente l’HTML. L’aggiunta di CSS ha permesso di visualizzare il video su dispositivi mobili.

2 Mi Piace
3

Puoi condividere il tuo hack qui?

2 Mi Piace
4

@tobiaseigen certo!
HTML all’interno del componente nel mio caso (prestare attenzione a “EMBED” nel link di YouTube):

<p>Unisciti esclusivamente a StarCohort, percorrendo il percorso EuroTiger di UA, in sincronia globale 🌍. Scala il prossimo.</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 (incolla all’interno del Componente), nel mio caso:

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Rapporto d'aspetto 16:9 */
    padding-top: 30px; /* Un po' di padding in alto per evitare la sovrapposizione dei contenuti */
    height: 0;
    overflow: hidden;
}

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

Spero che questo possa aiutare qualcuno)

3 Mi Piace