embedded video size

Hello @afmeckel,

I Think the CSS below can help you to fix it: https://i.postimg.cc/8zcqcfr4/image.png

.single-post figure {
    max-width: 715px;
    margin: auto;
    margin: 1.5em auto;
}

.single-post .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    padding-top: 0;
}

Put the above CSS in Customizing Environment > Custom CSS/JS on the “CSS code” section.

Hi @skalanter,

Thanks for the snippet! It works perfectly for posts created in Gutenberg.

Unfortunately, it also causes all of my images to be unresponsive in tablet and mobile views but only in posts that were created with Elementor (before I switched to Gutenberg) and only images that were embedded in the text editor widget. I tested the image widget and those are responsive.

Since that seems to be an Elementor issue, I consider this problem solved but, since I have your attention and it’s a somewhat related issue, may I ask your opinion on transferring content from Elementor to Gutenberg?

Could I simply copy-paste the content and do a 301 redirect to the new Gutenberg post without losing link equity/juice?

That would be a lot easier than having to replace all of the text editor images with image widgets in Elementor (and probably also improve page load speeds).

Sorry to ask that here but I couldn’t get a reply about that in the Gutenberg forum.

Hello @afmeckel,

Don’t worry about that, I’ve changed my CSS code, so please use the CSS below instead previous css:

@media(min-width: 680px) {
    .single-post figure {
        max-width: 715px;
        margin: auto;
        margin: 1.5em auto;
    }

    .single-post .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
        padding-top: 0;
    }
}

I’ve checked it in those posts:
https://naturephotoist.com/ideas-macro-nature-photography/
https://naturephotoist.com/6-big-tips-for-small-bird-photography/
Please let me know the results.

Regarding Gutenberg, fortunately, Gutenberg and Elementor have an integration. If you have any posts in Elementor page builder and then deactivate Elementor, all widgets will be converted to Gutenberg blocks!

Note 1: If you want to keep Elementor active and want to change all posts to Gutenberg blocks, you can head over to WP Dashboard > Elementor > Settings > and unchecked “Posts” for Post Types, then posts will be converted to blocks: https://i.postimg.cc/pXL52cJ6/image.png.

Note 2: I’m sure about default widgets in Elementor, but if you use Elementor add-ons widget(s), maybe your content will miss.

Regarding the “HTTP 301”, please read this link: https://en.wikipedia.org/wiki/HTTP_301. I think you need to save permalinks again after the switch. Head over to WP Dashboard > Settings > Permalinks and click on the “Save Changes” button — I suggest you set it on the “Postname”. and finally in the default widgets, you can copy the section on Elementor, then paste that to Block editor environment: https://i.postimg.cc/N0cNr3DQ/image.png

If you want to use Gutenberg and Elementor, you can read this link: https://elementor.com/blog/blocks-for-gutenberg/.

Hi @skalanter,

That snippet solved the Elementor image size issue-thanks a lot!

The only issue I see now is a large space above the embedded video player in mobile view (that I forgot to mention in my original post).

Any chance that can also be solved with a snippet?

And thanks very much for answering my Elementor to Gutenberg question. I wasn’t aware of any of those options before (despite a lot of searching). I’ll do some testing and post your suggestions in my unanswered question over on the Gutenberg forum. I know at least one other user will be grateful, too.

@afmeckel for the space above the video in mobile, please try the below CSS code.

@media only screen and (max-width: 669px){
.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    padding-top: 0;
}
}

Or you can do a bit of modification in the sachin’s code and check.

@media(min-width: 680px) {
    .single-post figure {
        max-width: 715px;
        margin: auto;
        margin: 1.5em auto;
    }
    }
    .single-post .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
        padding-top: 0;
    }

• This reply was modified 3 years, 5 months ago by Abhishek.
• This reply was modified 3 years, 5 months ago by Abhishek.

That worked perfectly!

Thanks very much.