Gutenberg: Wrong video size in the editor

[PeopleInside]

Describe the bug
A clear and concise description of what the bug is.

Video are showed in not real version in the new Gutenberg editor:

The correct look is in the Classic editor:

To Reproduce
Simply have a video in the editor

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows 10
• Browser [e.g. chrome, safari] Firefox
• Version [e.g. 22] 65.0.2

[sbardian]

Was looking into this, the editor appears to display the video with the correct size, but after publishing the videos are all the same size because of the following css:

.entry .entry-content .wp-block-video video {
    width: 100%;
}

Adding a custom class (ex: myVideo) to the video block and adding the following css to your site would fix this issue I think:

.myVideo video {
    width: auto;
}

While editing:

[PeopleInside]

The issue of the video size in the Gutenberg editor seems to be related to:

.block-editor__container iframe {
    width: 100%;
}

If i remove the width: 100%; the issue is resolved but i only be able to do this with the browser console.

[sbardian]

Maybe I was looking at the wrong editor. I was just editing a page and inserted a video block. Feel free to ignore my previous comment if so.

[marcus-hiles]

Cool @PeopleInside, seems you are almost there.
You can add this block of code to your functions.php file found in your "wp-content/themes/your_theme_name" folder. This adds up the css to the admin header on page load

add_action('admin_head', 'my_custom_css');

function my_custom_css() {
  echo '<style>
    .block-editor__container iframe {
      width: 100% !important;
    } 
  </style>';
}

Happy coding, you can link up some more with me if you have any follow ups here :
www.marcus-hiles.com

[PeopleInside]

I removed Gutenberg come back to classic editor. Gutenberg is not working

[marcus-hiles]

Wow, really @PeopleInside? what else isn't working for you, apart from the issue you reported?

[PeopleInside]

Video is not working, the size of the editor is wrong. I need install additional plugin and put hands on code for have the standard editor working? I really don't like Gutenberg.

[marcus-hiles]

Oouch @PeopleInside, seems like it's giving you hell.
I've used it before it worked awesomely well. What version of wordpress are you using though?

[PeopleInside]

The last one.

This CSS code doesn't help me it give issues.

    .block-editor__container iframe {
      width: 100% !important;
    } 

Nothing is working for me of the Gutenberg editor.
Issue with video size in the editor and issue with the size of the editor: https://github.com/WordPress/gutenberg/issues/14405

Also the page text format are wrong sometimes. All is correct and good with the previous editor (the classic).

Gutenberg can be a nice idea but is not ready and now this is the default editor of Wordpress.. not only this i opened an issue because the editor is on wrong size and the issue has been closed.. so existent issue with the editor will stay. Seems for use the standard editor of Wordpress you need put hands on code. This has no sense to me.

I am sad to see this change in Wordpress because from a nice experience are all transformed in negative.

[marcus-hiles]

@PeopleInside If its wordpress 5, then I noticed they have a few issues with it, they are working on. This normally happens with software upgrade.
You can report your issues here : https://wordpress.org/support/plugin/gutenberg/, so it can be fixed included in their next release.

[PeopleInside]

I done. See my previous message. Issue has been closed without a fix.

[marcus-hiles]

@PeopleInside Hmmm, I checked your comments here #14405. I think you are right the Gutenberg editor shouldn't be forced on us, we should be given the option to choose Gutenberg or use any other editor. That's putting the user's preferences and needs first, since user's contribute mightily to software growth and popularity.

[PeopleInside]

Yes sound strange Gutenberg has been forced... and give a lots of problems. And also from review people are not happy... and i want upgrade but too many issue... i cannot understand the sense to introduce an editor that cause issue. Anyway this is off-topic. I am here just because i tried to move to Gutenberg but still have issues and issues and issues.

[PeopleInside]

Any news about this issue?

[PeopleInside]

Someone in Wordpress has decided to force the use of this editor as standard.
The video size are showed wrong and this issue is kept open without updates also if i asked for months...

How i can use this editor if show in wrong size videos?
I cannot love this editor, i can't...

[glendaviesnz]

@PeopleInside I wasn't able to replicate this in the latest gutenberg editor build - when embedding a video in the classic block, and with the video embed block, they display at full width in the editor and the front end:

If you are still having problems with this can you please confirm which version of WordPress/Gutenberg you are now running, and which theme you have active when you see this problem, thanks.

[PeopleInside]

How it looks in the page?
Same size?
This is screen from editor.