Vimeo video (iframe) in Carousel: Swipe not working on mobile

[acmarion]

Hi, I used the code below to have centered full size vimeo embeds in my website's carousels. When on mobile, the slides with the vimeo embed won't swipe.

/* Carousel full page */
.slide-inner {
    max-width: 85%;
    margin: auto;
}

/* Carousel vimeo Video full size */
.lay-carousel .slide-text {
padding-left: 0;
padding-right: 0; }

.slide-text iframe {
    width: 100%;
    height: 100%;
}

.slide-text p {
    height: 100%;
}

.slide-text {
    height: 100%;
}

Would there be a fix for it?

If it's helpful, you can look at the work in progress site at http://dev.alexiscoutumarion.com

Thanks!

[mariusjopen]

Dear @acmarion
I can see that.

We will have a look.

Best!

Marius

[arminunruh]

As far as I know you cannot put a vimeo video inside of a carousel.

Ok you did so using an iframe in a text element.

An iframe is like a new website that is embedded in your website.
Thats why the swiping events are triggered inside the embed, not in the carousel. You could place an invisible div on top of the vimeo video. This way the swipe events should work correctly.
However, you'd probably need to make the vimeo videos autoplay.

Better to just use a html5 video as a carousel element!
Why do you want to use a vimeo video?

[acmarion]

Hi @arminunruh thanks for your reply.

I was using vimeo because I was thinking it would make the website load faster since it's hosted on the vimeo server instead of mine. I liked the fact that I could upload heavy Hi-res videos and that vimeo will automatically play the resolution that is best suited for the user's connection.

Also I liked the fact that I was able to only have the play button and fullscreen icon displaying without needing to customize the player that much.

[arminunruh]

Sure!

You're right, it would load better.
Well well I will write this down as a good idea for the carousel and will work on it one day!

[acmarion]

@arminunruh Thank you!

[CharlotteG]

Hi @acmarion

your website looks great! I was searching for exactly the same carousel option — embedding Vimeo links via iframe in a the source code of a text element. Would you like to share the iframe text code that you used? That would be awesome. It seems to not be working for me and I am not sure what I have been doing wrong.

thanks!

[acmarion]

@CharlotteG Hi, sorry I just saw this here is the code I put in the custom html

/* Carousel full page */
.slide-inner {
    max-width: 85%;
    margin: auto;
}

/* Carousel vimeo Video full size */
.lay-carousel .slide-text {
padding-left: 0;
padding-right: 0; }

.slide-text iframe {
    width: 100%;
    height: 100%;
}

.slide-text p {
    height: 100%;
}

.slide-text {
    height: 100%;
}

and then an example of what you put in the carousel image html box:

<p><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://player.vimeo.com/video/395113197" frameborder="0" allowfullscreen=""></iframe></p>

Hope this helps!

[Richard]

Dear @acmarion

Amazing! :)

Thank you so much for helping to build a stronger community.

Sincerely
Richard

[acmarion]

@Richard-Keith Of course!

[Baptiste]

@arminunruh Looking forward to do this too with the carousel 🙏

[tali]

@acmarion thank you for sharing :) I would like to use it but I dont understand where to add the code on the carousel.. could you tell me where does it go? I would appreciate it a lot :)