Wie zeige ich ein Video im angesagten Login-Modal an?

Unterstützung
1

@meghna Vielen Dank für diese Komponente!
Sie funktioniert wie erwartet auf dem Desktop, aber
das Video (YouTube-Kanal) erscheint nicht auf Mobilgeräten (Chrome, Edge-Browser) auf dem iPhone XR (zumindest).
Haben Sie eine Idee, wie man das beheben kann?
Vielen Dank!
P.S. Auf dem Screenshot sollte der leere Bereich über dem Anmeldebutton das Video sein…

IMG_2966.PNG
IMG_2966.PNG828×1792 117 KB

2

Gelöst durch Einbetten von Videos von YouTube durch leichte Änderung des HTML.
Das Hinzufügen von CSS half, Videos auf Mobilgeräten anzuzeigen.

3

Kannst du deinen Hack hier teilen?

4

@tobiaseigen klar!
HTML innerhalb der Komponente in meinem Fall (achten Sie auf „EMBED“ im YouTube-Link):

<p>Treten Sie exklusiv dem StarCohort bei und gehen Sie synchron auf dem EuroTiger-Pfad von UA. Skalieren Sie als Nächstes.</p>
<p class="center-aligned-element">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QKLAKLp7bDw" title="YouTube-Videoplayer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>

CSS (in die Komponente einfügen), in meinem Fall:

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Seitenverhältnis */
    padding-top: 30px; /* Etwas Abstand oben, um eine Überlagerung von Inhalten zu vermeiden */
    height: 0;
    overflow: hidden;
}

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

Ich hoffe, das hilft jemandem)