Vimeo videos not working on Chrome

[luciantucker]

I noticed that if you use the Video widget to add a video from Vimeo, it will not work in Chrome browsers (at least on Mac). It works fine in other browsers. Visually, a second set of video controls appear on top Vimeo's video controls. Confirmed this on different servers, with different sites, and with different themes.

Steps:

1. Go to Appearance > Widgets or Appearance > Customize,
2. Add Video widget
3. Click "Add Video," then "Insert from URL," then enter a Vimeo URL.
4. Visit a page on Chrome which has that widget.
5. Observe that pressing play has no effect.

[audrasjb]

Hi and thanks for opening this ticket.
I'll check it soon.

[nikolam]

@audrasjb Solution is here, just needs to be added to the code: ​https://stackoverflow.com/questions/50236646/chrome-vimeo-iframe-autoplay-not-working-anymore/50410537#50410537

Not sure if the widget uses wp_video_shortcode(), but the issue occurs when that function is used as well.

[audrasjb]

Vimeo URL insertion

[audrasjb]

Vimeo widget generated in WP Widget Admin screen

[audrasjb]

Vimeo widget on front-end: it works

[audrasjb]

Hi @luciantucker

After some tests (see screenshot above), I coudn't reproduce the issue on my side. I made my tests on a fresh WP install without any plugin, on Twenty Nineteen theme and on Mac OSX / Chrome browser.

Could you add some context/screenshots or other element to help the issue to be reproduced?

Otherwise, we're going to close the ticket as worksforme.

Cheers,
Jb

[nikolam]

Tested on Arch/Chromium, but I have reports from a client on Windows/Chrome that it behaves the same.

The WordPress is release 5.2.2, with Twenty Nineteen theme.

[nikolam]

Also, no plugins. Just WordPress with the default (non-modified) theme.

[nikolam]

Also, I think that it works just on Mac/Chrome, since the client specifically reported Windows/Chrome that does not work, and they have Mac for daily usage. So I assume that they would let me know that it does not work on all Chrome browsers, no matter the OS.

But I have asked them to test it on Mac/Chrome as well and let me know if it works (since I do not own any Macs).

[luciantucker]

I just made a brand new Wordpress site and I'm still seeing the issue on Mac/Chrome. Also using the Twenty Nineteen theme, no plugins active, in 5.2.2.

Here is a link to the site: ​https://lucian.humspace.ucla.edu/wp/
Here is a link to a screenshot: ​https://monosnap.com/file/yMQnGvM61OIi6AiHvpasSndBB8NfN5
Here is a video of the issue: ​https://monosnap.com/file/lQ6pujeROmpsRR0j76UxU3AsGr8EL6

[audrasjb]

Hi @luciantucker

The video located at ​https://lucian.humspace.ucla.edu/wp/
works fine on my side when I click on the "play" button. I'm using Chrome 75.0.3770.142 / Mac OS 10.12.6.

[nikolam]

Hi @audrasjb,

I can reproduce the issue on Chrome 75.0.3770.142 on Windows 10 (x64), as well as on Chromium 75.0.3770.142 on Arch Linux.

Also, I can reproduce the issue on Chrome 75.0.3770.143 on Android 8.0.0 (Samsung Galaxy A5 2017).

It's possible that the issue cannot be reproduced on Mac OS.

The issue is related to this update: ​https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
And just to state it again, the issue is not that autoplay does not work, the issue is that playing a video from Vimeo does not work at all on Chrome.

[audrasjb]

Thanks for the report @nikolam but nobody said that it is related to autoplay in this Trac ticket :-)

See screenshot below, coming from MacOSX/Chrome. I'll try to reproduce it again on Windows but @luciantucker said he reproduced the issue on Mac OS as well. I can't reproduce it on my side for the moment.

[nikolam]

Thanks for the report @nikolam but nobody said that it is related to autoplay in this Trac ticket :-)

Yup, just wanted to clarify the link, since Google is talking about autoplay only.

I'll also attach the gif of it on Arch (but it behaves the same on Windows as well).

[nikolam]

Chromium, Arch

[nikolam]

Chromium, Arch, with console output

[luciantucker]

So in summary, the issue has been reproduced on Mac, Windows, and Arch by two different people. I'm able to see the same error in the console as @nikolam, but I would note that I'm not seeing that console error consistently. Sometimes it doesn't work and I don't see that error.

One odd solution I found though is if I hold shift and press the reload button (hard refresh) I can get it to play, but sometimes I have to do this multiple times before it works.

And regardless of whether or not it works, I consistently see a Cross-Origin Read Blocking error in console: "Cross-Origin Read Blocking (CORB) blocked cross-origin response ​https://vimeo.com/345922827?loop=0&_=1 with MIME type text/html. See ​https://www.chromestatus.com/feature/5629709824032768 for more details."

And I'm using Chrome Version 75.0.3770.142 (Official Build) (64-bit)

[nikolam]

Just to add, hard reload does not do anything for me, the video does not play no matter how many times I try. But that shouldn't matter at all, since user must not need to do that for the video to play.

@luciantucker Android can be added to the OS list as well. :)

The only thing I can't check is if it works on Mac for me, because I don't have any Apple devices.

[nikolam]

@audrasjb Any updates? Were you able to reproduce the issue on Windows or Linux?

[rmsgreig]

We are also having this same problem with the player not working on Google and are requiring a solution ASAP. Is there any progress with this?

[magenhyatt]

I am having the same issue on a site of mine - with Safari and Apple products not playing Vimeo videos at all. They have the player, but just a blank, black box is showing. Also hoping for a fix ASAP as we are just waiting on this issue to get resolved before launching this website: ​https://rrbluesprings.wpengine.com/watch/

Thanks guys!

[audrasjb]

Removing close keyword since the bug was reproduced by other people.
Removing major severity as this is not considered as a major issue on WordPress Core.

Now, we 'll need a patch. Anyone able to reproduce the issue is welcome to propose a patch to help this ticket to go ahead.
Adding needs-patch keyword.

Cheers,
Jb

[audrasjb]

@magenhyatt : Aside, I wouldn't recommend to wait for a patch on this before launching anything :-)

The ticket still needs a patch and even if a patch was proposed in the next few weeks and the ticket addressed in WP 5.3, this release is scheduled for November 12 .

[magenhyatt]

@audrasjb - that makes sense and thank you for the update. I am wondering why this other site of mine that uses Vimeo- works fine on mobile and desktop and has the same plugins: ​https://river.life/messages/... I had them check the ​https://rrbluesprings.wpengine.com/ for me on Safari and iPhone and they get just a black space where the video should be, but on the River's site, all is working.

[garrett-eclipse]

Hi @magenhyatt site specific questions are usually better for the wordpress.org/support forums.

Taking a quick look at your two sites there they implement the vimeo player in two completely different ways. The working version using the iframe embed for vimeo while the one broken in safari is using plyr.js which is a custom player. As you're using the Sermon Manager pro site which generates that code I believe you can update it's video settings to use HTML5 or iFrame rather than plyr.js which should resolve this. That being said you can contact their support for assistance with their video player. It may be that some JS errors are interferring with it, inspecting on Safari I am seeing your Pro theme is throwing some 404's on map files which relates to this thread;
​https://theme.co/apex/forum/t/error-failed-to-load-resource-404-files-on-latest-version-x-pro/40055/5

I would first attempt to switch to use an alternate video player. And if you do want to try to fix the plyr.js see if there's an update for the pro theme to fix the 404's or contact support for the pro theme and the sermon manager plugin as it seems there maybe a conflict between the two.

I hope that helps send you down the right path, reviewing this ticket and your specific issue they're unrelated as your setup is using a custom player provided by your plugin and not WordPress core.

Best of luck,
Cheers

[magenhyatt]

@garrett-eclipse - this was super helpful! They switched to the video embed and that worked on safari. SO at least that tells me that the issue is with the video link itself. Much appreciated.

Replying to garrett-eclipse:

Hi @magenhyatt site specific questions are usually better for the wordpress.org/support forums.

Taking a quick look at your two sites there they implement the vimeo player in two completely different ways. The working version using the iframe embed for vimeo while the one broken in safari is using plyr.js which is a custom player. As you're using the Sermon Manager pro site which generates that code I believe you can update it's video settings to use HTML5 or iFrame rather than plyr.js which should resolve this. That being said you can contact their support for assistance with their video player. It may be that some JS errors are interferring with it, inspecting on Safari I am seeing your Pro theme is throwing some 404's on map files which relates to this thread;
​https://theme.co/apex/forum/t/error-failed-to-load-resource-404-files-on-latest-version-x-pro/40055/5

I would first attempt to switch to use an alternate video player. And if you do want to try to fix the plyr.js see if there's an update for the pro theme to fix the 404's or contact support for the pro theme and the sermon manager plugin as it seems there maybe a conflict between the two.

I hope that helps send you down the right path, reviewing this ticket and your specific issue they're unrelated as your setup is using a custom player provided by your plugin and not WordPress core.

Best of luck,
Cheers