How to display a video on the trendy login modal?

Support
1

@meghna Thank You for this component!
Works as expected on desktop, but
video (YouTube channel) does not appear on mobile (Chrome, Edge browsers) on iPhone XR (at least).
Any thoughts how to fix this?
Thank You!
P.S. On screenshot blank space above log in button should belong to video…

IMG_2966.PNG
IMG_2966.PNG828×1792 117 KB

1 Like
2

Solved by embedding video from YouTube by changing HTML a bit.
Adding CSS helped to have video on mobile.

2 Likes
3

Can you share your hack here?

2 Likes
4

@tobiaseigen sure!
HTML inside component in my case (pay attention to “EMBED” in YouTube Link):

<p>Exclusively join the StarCohort, walking UA`s EuroTiger Path, in global 🌍 sync. Scale next.</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 (paste inside Component), in my case:

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    padding-top: 30px; /* Some padding at the top to avoid content overlay */
    height: 0;
    overflow: hidden;
}

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

Hope this will help someone)

3 Likes