Wp-calypso: Customizer: Video Widget fails to load YouTube video when added by URL

[pauljacobson]

This report is from a user report: 4010287-hc.

Steps to reproduce

1. Opened the Customizer in WordPress.com, opened the Widgets section
2. Clicked on the button to Add a Widget
3. Selected the Video widget from the list
4. Clicked on the button to Add Video
5. Clicked on the link to Insert from URL
6. Pasted the following URL into the field: https://www.youtube.com/watch?v=NNCEVYMTRtM

What I expected

After adding the YouTube video URL, a video preview should appear in the window, enabling the user to add the video to their widget to complete the process.

What happened instead

An error appeared, stating the following:

Sorry, we can’t load the video at the supplied URL. Please check that the URL is for a supported video file (.mp4, .m4v, .webm, .ogv, .flv) or stream (e.g. YouTube and Vimeo).

Browser / OS version

User: Chrome 66.0 on Windows 10 0.0.0
Tester: Firefox Developer Edition 61.0b9 on macOS 10.13.4

Observations

This issue also manifested when testing with the older Widgets interface in WP Admin, in Appearance.

I was able to embed a YouTube video in a Text Widget on the user's site using a YouTube link. I pasted the link into the text field of the Text Widget and the link resolved into an embedded video:

Context / Source

user-report #manual-testing

[aamills]

Additional report #4017714-hc

Followed up here with alternative text widget idea: #1194832-zen

[Robertght]

1194109-zen/#4008453-hc

[hermawan22]

Hi guys, sorry.
I don't know where u guys see user report? This only for internal team of automattic?
Thanks guys. :)

[kylemcph]

Same issue,

1194419-zen / #4012834-hc

[designsimply]

Hi guys, sorry.
I don't know where u guys see user report? This only for internal team of automattic?
Thanks guys. :)

Hi @hermawan22 ! Thank you for asking about that. Yes, the codes such as 1234567-hc are internal references that we use for tracking some of our internal reports. Knowing how many times something was reported by users is one factor we use when determining prioritization for issues. Thank you for noticing them and for your interest in the Calypso project!

[hermawan22]

Hi @hermawan22 ! Thank you for asking about that. Yes, the codes such as 1234567-hc are internal references that we use for tracking some of our internal reports. Knowing how many times something was reported by users is one factor we use when determining prioritization for issues. Thank you for noticing them and for your interest in the Calypso project!

Awesome, thanks for the explanation @designsimply , hopefully can contribute much more in Calypso. :+1:

[jesscga]

Reported in #4037261-hc, user is OK with Text widget workaround for now

[jesscga]

Reported in #131484-hc

[nielslange]

Another one in #4037888-hc

[arunsathiya]

3908100-hc / #1196243-zen

[Robertght]

1198951-zen

[arunsathiya]

On testing, it seems to be affecting video links from most of the sites shown on https://en.support.wordpress.com/videos/

I have been able to reproduce this error with Instagram, DailyMotion, Vimeo, YouTube and Facebook so far.

[sarahcada]

Also reported at #4095614-hc

[rantoncuadrado]

Also #1201581-zen and #4099233-hc

[jjchrisdiehl]

Also #4107998-hc

[KokkieH]

A report in the forums

[kriskarkoski]

350262-hc

[rezzap]

Have had another report in #4121839-hc

The alternative solution using the text widget instead worked for the user.

[eoinsav]

1204959-zen

[pauljacobson]

I have another report in 4152594-zen. I recommended using a Text Widget in the meantime, too.

[goblinartificer]

4167757-hc, text widget also worked

[sophiegyo]

4205796-hc text widget works here, for Youtube videos.

[thabotswana]

I got this report #2852964-hc. Advised them to use the Text Widget

[rantoncuadrado]

another one #1212508-zen

[zyousafi]

Another report here 3748082-hc. Suggested they use the Text Widget for now.

[aamills]

Reported #3589870-hc

Text widget workaround used for now, but they are training a team future staff how to build and use the site and were hoping to continue to use the video widget in training.

[kristarella]

4279968-hc will suggest text widget

[sophiegyo]

4285382-hc - suggested text widget, confirmed that the text widget workaround works for them.

[pauloeaquino]

1214933-zen I'm suggesting text widget for now

[KokkieH]

Forums. Suggested the workaround.

[kylemcph]

3911478-hc - suggested text widget, confirmed that the text widget workaround works for them.

[Robertght]

That occurs with the Vimeo videos as well.

[jesscga]

1224849-zen - suggesting text widget

[aamills]

4427579-hc - Suggested text widget in chat as an alternative, but not sure they understood.

[thebud15]

4431936-hc User unable to add YouTube link to video widget

[sourourn]

1227138-zen

[jamiepalatnik]

Reported here: 1229858-zen and 1251164-zen

[KokkieH]

https://en.forums.wordpress.com/topic/widget-adding-a-video-to-my-sidebar/

[fstath]

If you insert the video link and click on the "Add to widget" button before the message pops up, the video is properly embedded.

I have found that by accident when I tested it on a site and I was in a hurry.

[lsl]

2338655-hc - used text widget as a workaround.

[pauljacobson]

Here's another report: 2088776-hc

I also explained the workaround.

[hacchism]

Another report: 1248114-zen

[zandyring]

Reported in 1256628-zen as well.

[zandyring]

Also in 1247490-zen

[lancewillett]

For future reference — no need to move this one, but next time — this isn't a Calypso bug since Customizer runs WP Admin inside Calypso and is a separate tech stack and codebase — and we have a different repo for it at Automattic/customization.

[jblz]

Looks like this has something to do with the media js calling the oembed proxy endpoint differently on WPCOM sites.

On my test site, the client makes a request that looks like:
https://public-api.wordpress.com/oembed/1.0/sites/1234/proxy?_envelope=1&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DvchLJE-RceM&discover=false

...& it 404s.

---

On a Jetpack-connected site, the request looks like:
https://adjective-noun.jurassic.ninja/wp-json/oembed/1.0/proxy?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DvchLJE-RceM&discover=false

...& it gets the proper media metadata in response.

---

Further, the WPCOM site shows an error in the console:

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.youtube.com/watch?v=vchLJE-RceM with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Investigating.

[nylen]

Thanks @jblz for jogging my memory with those API URLs. This should be fixed as of r177925-wpcom.

[mishivee]

Hi there @nylen and @jblz! This issue needs to be reopened. I am seeing the same exact error today - same steps to reproduce on simple sites only.

Video: https://cld.wthms.co/4S2N4H

Direct link to image: https://cld.wthms.co/bM7IFx

[tbradsha]

Another in #2246322-zen.

[tbradsha]

Workaround for now: paste the YouTube URL in a text widget.

[KokkieH]

This is not a Calypso issue, as the widget code doesn't live in Calypso, and this happens in /wp-admin/widgets.php as well.

Reported earlier in 8153-wpcom

[suyogyashukla]

Reopening this as it looks like embedding YouTube video on non-AT sites isn't working, same error as reported originally.

What I have tried:

• WPORG install, works as expected.
• WPCOM AT, works as expected.
• WPCOM Simple (Premium or Biz), gives:

Sorry, we can’t load the video at the supplied URL. Please check that the URL is for a supported video file (.mp4, .m4v, .webm, .ogv, .flv) or stream (e.g. YouTube and Vimeo).

User report: #16516969-hc

Personal test site: personaltesting6.home.blog
Premium test site: vbngmfd.com

[suyogyashukla]

Closing this and moving to 8153-wpcom

[gwwar]

Reserving this comment for debugging:

Noting that this is likely a malformed client request:

[gwwar]

While I work on a fix, I believe dropping the http or https protocol will allow for youtube video embedding.

So for example: youtube.com/watch?v=EQx6fyrZDWM instead of https://youtube.com/watch?v=EQx6fyrZDWM

[mmtr]

this is likely a malformed client request

I think you are correct. Apparently we're making the request with the URL to embed as a body param, but the oEmbed proxy is expecting it as a query param. D39741-code should fix this.

[lancewillett]

Confirmed the patch listed above works as expected. Woot!

(Using Firefox latest stable on macOS with a WordPress.com Simple test site.)

Before:

After:

[lancewillett]

Adding a few UX notes, not a blocker for this change.

In the widget pane:

1. Change the placeholder from http:// to https://
2. Possibly show a larger video preview in the widget pane

[gwwar]

Adding a few UX notes, not a blocker for this change.

@lancewillett these suggestions make sense. 👍

This is the core video widget so it might be better to follow up as an upstream contribution versus adding a customization here.

[gwwar]

Noting that @mmtr fixed this in D39741-code. Thanks for the reports y'all. ✨

If this breaks again in the future, please favor filing a new issue over reopening. This mainly reduces the amount of reading/history on the issue and sometimes a feature may break for different reasons. It's not a problem to copy paste the summary for example if reproduction steps are the same.