Vimeo Video Thumbnail Bug

Community resources Bugs
1

Hi there,

I know as a user, there is often something I make wrong and it is not webflow’s “fault”, but the following issue seems to be a bug.

I set up a CMS Page. There is a button. When you click it, a modal window opens with a video container and the Vimeo video (gets URL from CMS). On the computer it is working fine, also in mobile devices mode. But when I open the site in iOS Safari, the video thumbnail is blurry, glitchy and the play button is missing (but I can play it when I tab in the middle). When I switch the phone off (not power off) and then back on, the thumbnail is displayed correctly. This seems to be definitely a bug. Are you aware of this issue?

Here is a screenshot:

PNG
PNG1125×2436 127 KB

By the way, can you tell me how to stop the video being played when I tab on the “close” button?

To see the issue, go to menu in the right upper corner → Motion Design & CGI - > Hexagon and then tab on the blue play button.

Thanks!

Cheers
Florian

Here is my public share link: https://preview.webflow.com/preview/portfolio-testarea?utm_source=portfolio-testarea&preview=84c99fd32f341511132a198afda98e2c
Published page: https://portfolio-testarea.webflow.io

2

The Problem still exists, but I might have find somehow a workaround for the moment. I wanted to solve my second problem, stopping the video when I hit the close button. So I found this post here:

It works and not only that, the video thumbnail shows up correctly, not blurry and with the play button.

But again, it is only a workaround for my case, the bug I explained in the first post still exists. It seems to be fine on android phones, but not in iOS Safari. I hope someone of the Webflow team reads this and finds a solution. Thanks!

Cheers
Florian

3

Hi @fhoelterhoff,

Thanks for posting us about your Vimeo video on iOS, as this does sound a bit weird.

I tried reproducing this behavior on my end but was unable to as you may notice in the following short screen capture: Screen Recording 2019-03-12...

The test was completed using a clone of your project, with the custom code removed: https://portfolio-testarea-vimeo.webflow.io/motion-cgi/et-in

Could you please let us know what iOS device you are using? We’d be happy to test for you :bowing_man:

4

Hi again :slight_smile:

I have currently running iOS 12.1.2 (16C101) on an iPhone Xs. I tested it on other iPhones and there was the same problem, but not with Android phones. On my mac, every simulation works fine, but on an actual iPhone it does not.

Here is a screen capture:
Screenrecord

Sometimes it is only blurry, sometimes with those magenta color glitches as seen on the screenshot of my first post.

Thanks for taking the time to have a look at it!

Cheers
Flo

6

Hi, @fhoelterhoff!

Thanks so much for bringing this to our attention! I was able to reproduce this issue on our end and I have passed it along to our team to see what we can do about a fix.

In the meantime, a workaround for using Vimeo videos in a Lightbox would be to implement the native Webflow Lightbox component.

As soon as we know more, someone from our team will reach out with more details!

1 Like
7

Hi @rileyrichter !

Thank you for taking the time to reproduce my scenario! I am glad that you had the same bug as I did. I am using a CMS to get the Video URL. I thought lightboxes are not yet supported in collection lists?

Anyway, for now it is somehow “fixed”, like I explained in my post number 2. Well, it is not a fix, but more a workaround.

Thanks again! I am excited and I hope you find the source of the problem.

Cheers
Flo

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.