Can't preview video embeds in the editor

[draganescu]

In the new widgets editor one cannot add embed blocks and then preview them.

Steps to reproduce:

1 have the Gutenberg plugin installed
2 go to the new widgets editor
3 add an YouTube block
4 paste an YouTube URL
5 preview the embed using the preview button in the block's toolbar
6 notice bug: nothings shows up except a caption placeholder
7 notice bug: the embed does not render on the front end either, for YouTube all I got was the link.

[helen]

I tried doing this with a Twitter URL, the embed is retrieved and displays correctly in the editor (takes a moment for the JS and styling to apply to the plain blackquote), but then only displays the URL on the front-end. When I tried it with a YouTube URL the embed does get retrieved as seen in network requests, but it doesn't show anything in the editor, and on the front end it actually holds whitespace in approximately the size of a video player because of the .wp-embed-aspect-16-9 class in block styles.

[talldan]

The youtube issue seems to be a CSS one in the editor, the HTML for the embed is correct. When I hacked on a height to the iframe the player is shown:

[talldan]

I think the same thing happens with Vimeo too. I'll treat this one as an editor side CSS issue for video embeds, and #26180 can be separate as a front-end issue for all embeds.

[talldan]

Figured it out, seems like we just need the wp-embed-responsive class in the editor. Simple fix would be to add that.

Separately I wonder why embeds don't work non-responsively without that.