Gutenberg: Embed video into column - text overlap

[paaljoachim]

Describe the bug
Adding video into column. Text for the 2nd area of the column overlaps the video.

To Reproduce
Steps to reproduce the behavior:

1. Add a column block. Select 2 cells/areas.
2. Add a video into the left cell.
3. Notice the text overlap.

Expected behavior
That the text would not overlap.

Desktop (please complete the following information):

• OS: Mac OSX 10.13.6
• Browser Chrome and Desktop Server
• Gutenberg Version 4.5.1

[designsimply]

Tested and confirmed that adding a video embed such as YouTube doesn't fit into a 2 column block and explodes outside of the block container area. Tested with WordPress 4.9.8 and Gutenberg 4.5.1 using Firefox 63.0.3 on macOS 10.13.6. (screenshot)

Note: I also tested with WordPress 4.9.8 and Gutenberg c33e91785 (>4.5.1) and found the same result. (screenshot)

Aside: I noticed that the video does get constrained to the space but shows up with quite a lot of letterboxing.

^{Tested with WordPress 4.9.8 and Gutenberg c33e91785 (>4.5.1) and the Twenty Seventeen theme using Firefox 63.0.3 on macOS 10.13.6.}

[iandunn]

This also happens with Image & Gallery blocks:

That's a 3-column block; the first two columns have Images and the 3rd has a Gallery.

Mentioned previously in #11159

[stmarytx]

I'm having the same problem. Seems like some CSS limiting the width of images and videos inside columns in the editor would go a long way toward improving the editing experience for the column block. On the front end they look fine.

[paaljoachim]

I was about to create a new issue for this when I discovered that I had already earlier created one...
Some additional screenshots.

Frontend:

---

I need to correct the above. As the above is a theme I am using that will need to improve the CSS.

Additional screenshots from Twenty Nineteen using three columns.
Video embed in second column. Some words below.
Third column more words here.

Frontend looks good.

[paaljoachim]

Here is a suggestion on how to fix this.
In the right sidebar have a drop down that selects the size of the embed.

https://support.google.com/youtube/answer/6375112?co=GENIE.Platform%3DDesktop&hl=en
For the default 16:9 aspect ratio, encode at these resolutions:

2160p: 3840x2160.
1440p: 2560x1440.
1080p: 1920x1080.
720p: 1280x720.
480p: 854x480.
360p: 640x360.
240p: 426x240.

@draganescu @jorgefilipecosta @mapk @

---

Btw I added this code to the child theme functions file.
(This will though set the video embed to one size even though different alignments might be used.)

`
/* Bigger embed size https://cantonbecker.com/work/musings/2011/how-to-change-automatic-wordpress-youtube-embed-size-width/ */

add_filter( 'embed_defaults', 'bigger_embed_size' );
function bigger_embed_size()
{
return array( 'width' => 640, 'height' => 360 );
}
`

[mapk]

@draganescu let me know if this is a bug that can be resolved without design, or if you need some design help.

[paaljoachim]

This is still a problem in Gutenberg 7.7.1.

Selecting column 2 where the video is located:

Video embed overlaps column boundaries on the backend.

[paaljoachim]

Is this something that Andrei @draganescu and/or Andrew @aduth could take a closer look at?
Is there a way to block content from bleeding out of the column they are placed into?

[draganescu]

@mapk what is a good default here? clip the content in a column or attempt to resize the width?

[paaljoachim]

Hey Andrei.

Here is an example of hiding the left and right sidebars. I am resizing the window. It would be natural to resize the video/image/etc in relation to the space of the column it is placed into.

[jasmussen]

The problem is the following CSS:

.wp-block-embed {
    min-width: 360px;
}

That needs a lower min-width, and it should fix this issue. CC: @draganescu

[mapk]

Thanks for pinpointing the problem, @jasmussen!

[jasmussen]

By the way, I'm almost completely certain that we added this min-width CSS to embed blocks because a number of them aren't responsive. For example, embed an Amazon book and it won't work below something around that number.

However, such min-widths should arguably be applied on a per-embed basis, rather than in a blanket way like this, so this is something we should let individual tickets be created for, and proceed with removing that min-width as noted!

[draganescu]

I added a small PR that appear to fix this but not sure if something else breaks instead. @jasmussen

[paaljoachim]

We will find out Andrei! Thanks for fixing it..:)