I can't fix the Youtube aspect ratio when NOT using the Muffinbuilder

lasolastech

Hi guys,

Please take a look at this published page: https://jeffmendelson.com/onebigtip/e165-andy-cabasso/.

Notice how the Youtube video is blown up out of proportion to the rest of the elements. In the backend, this looks good (see attached).

NOTE: These are blog posts and therefore NOT using the Muffin Builder.

Can you please help me out with the CSS to fix this on my site?

Screen Shot 2021-09-28 at 6.36.27 PM.png

Screen Shot 2021-09-28 at 6.36.15 PM.png

Phil

Hello,

Please, try the following CSS code:

figure.wp-block-embed-youtube iframe{
   height: 520px!important;
   width: 920px!important;
}

However, you can build your posts with the Muffin Builder.

If you want the content to be readable with the SEO plugin, you need to use the Builder -> SEO option.

https://support.muffingroup.com/faq/builder-seo/

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

lasolastech

This helps! Thx.

lasolastech

Here's how we fixed this across all pages:

/* CSS for responsive block embed */

figure.wp-block-embed div {

  position: relative; padding-bottom: 56.25%;  height: 0; overflow: hidden;

}

figure.wp-block-embed iframe {

  position: absolute; top: 0; left: 0; width: 100%; height: 100%;

}