Wrong aspect ratio for YouTube Embeds

cristianflorea · February 5

Hi,

I want to use this theme for my blog, where I usually embed YouTube videos. The problem is that on mobile devices the embedded videos don't maintain the 16:9 aspect ratio and they look pretty weird, as you can see in the screenshot below.

Also, is there any CSS code that I can use to get rid of this part of the header? Thanks!

cristianflorea · February 15

Hi,

Can you help me with a solution, please? I've already searched the forum, but didn't find an answer for my situation.

Thanks!

Phil · February 15

Hi,

Sorry, somehow, I overlooked your message.

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

cristianflorea · February 15

Hi,

Thank you for your reply. I've added the link in this message.

Thanks!

https://test.cristianflorea.ro

Phil · February 15

1) I can see that you use WP Editor for your posts. Videos are controlled by them, and we do not have an influence on that.

If you use BeBuilder instead, the video will be scaled down with an appropriate aspect ratio.

2) Please go to Betheme -> Theme options -> Header & Subheader -> Header, and change the height value to zero.

Best regards

cristianflorea · February 15

Thank so much you for your help. The header problem has been solved with your guidance.

Regarding the videos, the problem is that I have hundreds of articles already written with WP Editor and it's a pain in the ass to convert all of them to BeBuilder. Also, with my current theme, everything works fine, that's why I think that it's a CSS problem somewhere on the BeTheme.

I attached below a screenshot with the current code from the last article and, as you can see, there is nothing wrong in here. It's a clean code, nothing that can influence the responsiveness in a wrong way.

cristianflorea · February 15

I've fixed it by adding this code to the functions.php

add_action( 'after_setup_theme', function() {
    add_theme_support( 'responsive-embeds' );
} );

Have a good day!

Phil · February 15

I was about to send you the same code. Happy to see that you found it first.

I hope that you put it in your child theme. Otherwise, your modification will be erased after the next theme update.

https://support.muffingroup.com/documentation/installation-updates/#child-theme

Best regards

cristianflorea · February 16

Yes, this is how I did it. Thank you!

Wrong aspect ratio for YouTube Embeds

Comments