Embedding Vimeo Block in Gutenberg not Full Width

Hi @whitsey ,

If you’re facing issues with the Vimeo embed block not allowing a width of 100% and there are no built-in settings to override it, there are a couple of potential solutions you can try:

1. Use custom CSS: If your website or platform allows you to add custom CSS, you can override the width of the Vimeo embed block using CSS. Here’s an example of how you can achieve this:cssCopy code.vimeo-embed { width: 100% !important; } In this example, we’re targeting the class .vimeo-embed and setting the width to 100% using the !important rule to override any conflicting styles. Apply this CSS to your website, and it should force the Vimeo video block to be 100% width.
2. Embed using iframe: Instead of using the Vimeo embed block, you can try embedding the Vimeo video using an iframe. Vimeo provides an embed code that you can customize and insert into your HTML. Here’s an example:htmlCopy code<iframe src="https://player.vimeo.com/video/VIDEO_ID" width="100%" height="HEIGHT" frameborder="0" allowfullscreen></iframe> Replace VIDEO_ID with the actual ID of your Vimeo video, and specify the desired HEIGHT for the video. Setting the width attribute to 100% should make the video occupy the full width of its container.Note: Be sure to adjust the HEIGHT attribute according to your requirements. If you want the video to scale proportionally, you can omit the height attribute altogether, and the video will adjust its height automatically.

Try implementing one of these solutions based on the specific requirements you’re using to embed the Vimeo video.

thanks but.

1. This does not work. I tried css before posting. While the outer iframe expands to 100%, the inner content/video does not in my tests.
2. That is a solution that i tried BUT it is basically bypassing the vimeo embed and therefore is not a solution to the vimeo embed problem.

• This reply was modified 1 year, 9 months ago by SJW.

The solution that worked for me was to add this to functions.php:

// Add support for responsive embedded content (YouTube, Vimeo, etc.).
add_theme_support( 'responsive-embeds' );

It replaces the ridiculous 500px width with responsive classes, I don’t know why this isn’t included by default or as an option in the Vimeo block.