WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#47268 reviewing defect (bug)

Vimeo videos not working on Chrome

Reported by: luciantucker Owned by: audrasjb
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Widgets Keywords: reporter-feedback needs-patch
Focuses: Cc:

Description

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.

Attachments (7)

Capture d’écran 2019-07-18 à 13.42.20.png (193.8 KB) - added by audrasjb 2 years ago.
Vimeo URL insertion
Capture d’écran 2019-07-18 à 13.41.41.png (62.6 KB) - added by audrasjb 2 years ago.
Vimeo widget generated in WP Widget Admin screen
9d8ef57a113ea061123b6816013df9e4.gif (1.5 MB) - added by audrasjb 2 years ago.
Vimeo widget on front-end: it works
Screenshot_2019-07-18_13-49-42.png (145.4 KB) - added by nikolam 2 years ago.
700231e77d023924a736ff53fe48c54e.gif (1.9 MB) - added by audrasjb 2 years ago.
vimeo-2019-07-22_17.57.57.gif (1.0 MB) - added by nikolam 2 years ago.
Chromium, Arch
vimeo-2019-07-22_18.01.31.gif (1.0 MB) - added by nikolam 2 years ago.
Chromium, Arch, with console output

Change History (29)

#1 @audrasjb
2 years ago

  • Owner set to audrasjb
  • Status changed from new to reviewing
  • Version 5.2 deleted

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

#2 @nikolam
2 years ago

@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
2 years ago

Vimeo URL insertion

@audrasjb
2 years ago

Vimeo widget generated in WP Widget Admin screen

@audrasjb
2 years ago

Vimeo widget on front-end: it works

#3 @audrasjb
2 years ago

  • Keywords reporter-feedback close added

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

#4 @nikolam
2 years ago

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.

#5 @nikolam
2 years ago

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

#6 @nikolam
2 years ago

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).

#7 @luciantucker
2 years ago

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

#8 @audrasjb
2 years ago

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.

#9 @nikolam
2 years ago

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.

#10 @audrasjb
2 years ago

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.

#11 @nikolam
2 years ago

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
2 years ago

Chromium, Arch

@nikolam
2 years ago

Chromium, Arch, with console output

#12 @luciantucker
2 years ago

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)

#13 @nikolam
2 years ago

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.

#14 @nikolam
2 years ago

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

#15 @rmsgreig
2 years ago

  • Severity changed from normal to major

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

Last edited 2 years ago by rmsgreig (previous) (diff)

#16 @magenhyatt
2 years ago

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!

#17 @audrasjb
2 years ago

  • Keywords needs-patch added; close removed

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

#18 @audrasjb
2 years ago

  • Severity changed from major to normal

#19 follow-up: @audrasjb
2 years ago

@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 .

#20 in reply to: ↑ 19 @magenhyatt
2 years ago

@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.

#21 follow-up: @garrett-eclipse
2 years ago

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

#22 in reply to: ↑ 21 @magenhyatt
2 years ago

@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

Note: See TracTickets for help on using tickets.