Jetpack: Video Widget: videos inserted from URL have wonky spacing

[designsimply]

Steps to reproduce the issue

1. Go to My Sites > Customize > Widgets > [widget area] > Add a Widget > Video.
2. Click the "Add Video" button, the "Insert from URL" link on the left, then paste in a YouTube video link (i.e. https://www.youtube.com/watch?v=tgbNymZ7vqY).
3. Click the "Add to Widget" button.
4. Click the Publish" button to save changes.
5. View the front end where the video is visible.
6. Check to see whether the video appears with the proper dimensions or whether it has extra

Result: the video does not display correctly—it has extra spacing around the video that shouldn't be there.

^{Seen at https://design5279.wordpress.com/ (wpcom simple) with the Twenty Seventeen theme applied using Firefox 57.0 on Mac OS X 10.13.1.}

What I expected

I expected that embedding a video into a widget area using the Video Widget would result in a video sized correctly.

What happened instead

Videos embedded into a widget area using the Video Widget result in a black box with extra spacing where it should not be.

Internal refs:

• "it's an issue related to adding the jp resizer by default" - p1511194590000457-slack-triage
• see patch D8373-code - p1511194590000457-slack-apollo

[designsimply]

/hat tip @darnelldibbles for the original Trac ticket 7957-wpcom and forums report link 882990-f.

This is how the sidebar looks when a video URL is added via the Video Widget:

And when set to full screen:

[designsimply]

/hat tip @kristarella for the chat report at 951288-hc.

I tested with several themes and different YouTube videos and all had excess grey space in the widget, and a tiny video in the full screen view.

[designsimply]

/hat tip @vparkhere for the Trac ticket at 7915-wpcom and the email report at 3319036-t.

[designsimply]

/hat tip @rachelmcr for testing and confirming the issue at 7957-wpcom #comment:3.

[designsimply]

/hat tip @laurelfulford for the live chat at 957298-hc and the email follow-up at 778822-zd-woothemes.

[designsimply]

/hat tip @scosgro for the testing (theme Pique) and the email report at 773311-zd-woothemes.

[designsimply]

/hat tip @otpidusprime for the email report at 777316-zd-woothemes.

[designsimply]

/hat tip @kathrynwp for the forums report at https://en.forums.wordpress.com/topic/dara-theme-no-full-screen-on-video-widget

[designsimply]

/hat tip @edequalsawesome for the chat report at 951337-hc and the email follow-up at 779731-zd-woothemes and for noting the theme name! (Theme: Broadsheet)

I tested this and was able to replicate it with the Broadsheet theme, but the full-screen video player worked as expected when I tested with Twenty Seventeen.

[designsimply]

/hat tip @scosgro for the chat report at 56811-hc. (Theme: Big Brother)

[designsimply]

/hat tip Pratik for the email report at 787263-zd-woothemes. (Theme: Heart and Style)

[designsimply]

/hat tip @hacchism for the email report at 787263-zd-woothemes. (Theme: Heart and Style)

[designsimply]

/hat tip @eduardozulian for noting a previous report is checking back in at 1006523-hc.

[designsimply]

/hat tip @adelineyaw for the email report at 795115-zd-woothemes.

[designsimply]

/hat tip @cscheer for the report in Slack at p1510938318000593-slack-triage.

[designsimply]

/hat tip @katinthehatsite for the chat report at 1038621-hc and for noting a workaround!

As a temporary workaround to fix the size, I have added text widget + embedded the video through a shortcode eg. [youtube]

[designsimply]

/hat tip @wynwinfor the chat report at 1045426-hc and the follow-up ticket at 803337-zd-woothemes.

[designsimply]

/hat tip Tiffany V for the chat report at 957298-hc and the follow-up email at 778822-zd-woothemes.

[designsimply]

Marked 4735-wpcom as a duplicate.

[oskosk]

This is addressed by r165801-wpcom and r165809-wpcom for .com sites. #8225 for Jetpack sites. Will close this issue when #8225 gets merged.

[chad1008]

This still appears to be affecting Jetpack (and Atomic) sites running Radcliffe 2.

Reported here: 816487-zd-woothemes

I tested a Youtube video in the Video Widget on a WordPress.com Simple, WordPress.com Atomic, and a self hosted (Pressable) Jetpack site. All three were running Radcliffe 2.

The Simple site worked fine - Atomic and Jetpack still displayed the video thumbnail sized in full screen mode.

cc @oskosk

[oskosk]

Thanks @chad1008 will check.