Gutenberg: Embed blocks should include container element for responsive scaling with align-wide

[robmaurizi]

Using the embed blocks to embed videos, the resulting iframe has a width and height applied to it, so the full-width and wide-width options don't display as expected.

Adding a container just around the iframe would enable devs to size that container as needed (eg. width: 100%; height: 0; padding-top: 62.5%;) to viewport resizing while maintaining the clip's aspect ratio.

Currently, the only container that can be used for this is the <figure> element, but that also contains the <figcaption> element, so the above CSS solution would hide the caption.

[designsimply]

I tested adding an embed block using WordPress 4.9.7 and Gutenberg 3.2.0 with Firefox 61.0.1 on macOS 10.13.5 and am including the resulting code for reference. I noticed the rendered code looks different depending on the active theme and am wondering whether this suggestion is something that should be left to the theme or a good idea to build into Gutenberg?

This is how the rendered html for an embed block with a YouTube video looks using the Atomic Blocks theme:

<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube">
    <div class="fluid-width-video-wrapper" style="padding-top: 56.2431%;"><iframe src="https://www.youtube.com/embed/ZP3DM8_hiLg?feature=oembed" allow="autoplay; encrypted-media" allowfullscreen="" name="fitvid0" frameborder="0"></iframe></div>
</figure>

The html for an embed block with a YouTube video looks using the Navi theme looks like this:

<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube">
    <iframe src="https://www.youtube.com/embed/ZP3DM8_hiLg?feature=oembed" allow="autoplay; encrypted-media" allowfullscreen="" width="720" height="405" frameborder="0"></iframe>
</figure>

[robmaurizi]

Interesting. Looking at the Atomic Theme, it looks like they're using the FitVids jQuery plugin to handle this globally across the site. That makes sense, but it seems like a stopgap to get around the lack of a suitable stylable container.

Underscores gives the same output as Navi theme.

But, given that the container width options promote various widths, it seems that the implantation is broken

[youknowriad]

I think with the newly added group block, you could add a container around any block and adapt the embeds as needed.