Fix YouTube Embed Aspect Ratio in WordPress

Many WordPress themes break your YouTube videos. You embed a link, and it looks terrible. You get black bars on the sides or a squashed image. It makes your site look amateur.

Here is how it was looking on my site:

I kept asking my WP dev guy to fix it because… well there are so many buggy issues with WordPress — let's be real.

The problem is usually a conflict between Gutenberg and your theme.

But it's a video embed problem that has been plaguing WordPress since the release of Gutenberg over 7 years ago.

Why Your WP Video Ratios Are Wrong

WordPress tries to be helpful. It wraps your video in a container called .wp-block-embed__wrapper. It even adds a class like wp-embed-aspect-16-9 to handle the sizing.

But themes are stubborn.

Many themes have their own rules for iframes. These rules often override what WordPress is trying to do. Sometimes the theme's CSS loads after the block CSS. Sometimes older embeds don't even have the right classes.

The result is a mess. Your theme tells the iframe to be one size, while the container wants to be another. And the website owner is confused AF.

The Bulletproof Fix

Here's the good news.

You don't need a plugin for this.

You just need a specific CSS trick. This method uses a 56.25% bottom padding. That number is the magic ratio for 16:9 video. It forces the container to stay in shape. Then, we tell the video to fill that container completely.

This works regardless of your theme settings.

How to Apply the Fix

1. Log into your WordPress dashboard.
2. Go to Appearance → Customize.
3. Click on Additional CSS.
4. Paste the code below into the box.
5. Hit Publish.

Here is the CSS code to use

/* =============================================
   YouTube / Video Embed Fixes
   ============================================= */

/* --- Gutenberg block embeds --- */
.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper object,
.wp-block-embed__wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.wp-block-embed-youtube {
    margin-top: 2em;
    margin-bottom: 2em;
}

/* --- Classic Editor / raw iframe embeds --- */
.entry-content iframe[src*="youtube.com/embed"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    display: block;
    margin-top: 2em;
    margin-bottom: 2em;
}

What This Code Does

The first part of the code creates a responsive box. By setting the height to 0 and using padding, the box stays at a perfect 16:9 ratio on any screen. Your phone or your desktop will show the same shape.

The second part targets the iframe itself. Use !important to make sure your theme doesn't try to change the width or height again. It forces the video to stretch and fit the 16:9 box we just made.

Maybe your theme is well-coded and you don't see this issue. But for most people using Gutenberg, this CSS saves hours of frustration. It just works.

If you site is newer and has only Gutenberg (no classic editor posts) you can use this code:

/* Force all video embeds to correct 16:9 aspect ratio */
.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper object,
.wp-block-embed__wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.wp-block-embed-youtube {
    margin-bottom: 2em;
}

Lemme know if this helped you!