How to fix full-width YouTube embeds in WordPress

YouTube embeds can show black bars or appear narrower than their content area when custom WordPress CSS applies the wrong aspect-ratio padding or limits the embed container’s width. In this case, videos added through YouTube Wizard and a standard YouTube embed were constrained by a forced 52% top padding and a separate max-width rule. Updating the ratio to 56.333% and removing the width restriction allowed the videos to display at the full available width.

Issue background

A WordPress site used YouTube Wizard to place videos inside content pages. Editors preferred the plugin because it was easier to manage than pasting custom iframe markup.

The videos played correctly, but the inline presentation did not match the same video on YouTube or in full-screen mode. The embedded player appeared narrower than the content area and showed black bars on the sides.

A standard YouTube embed module displayed the same problem, which indicated that the issue was not limited to one YouTube Wizard setting.

Diagnosis

The problem came from two custom CSS constraints applied to the video wrapper.

First, the video element used a forced top padding of 52%. Responsive video wrappers often use percentage-based padding to preserve an aspect ratio because vertical percentage padding is calculated from the container width.

The supplied value did not match the intended 16:9 presentation. The corrected implementation used:

padding-top: 56.333%;

Second, the embed block had a custom max-width restriction. Even after the ratio was corrected, that rule prevented a standard YouTube module from expanding across the full content width.

Removing the maximum-width constraint allowed both YouTube Wizard and normal embed blocks to use the space provided by their parent container.

Resolution steps

1. Reproduce the issue with more than one embed method. Test the YouTube Wizard output and a standard YouTube embed to determine whether the problem comes from the plugin or shared theme CSS.
2. Inspect the video wrapper. Use browser developer tools to identify the element responsible for the responsive aspect ratio.
3. Review percentage padding. Look for custom padding-top or padding-bottom values that control the wrapper height.
4. Correct the aspect ratio. Replace the forced 52% value with the tested 56.333% value used for the intended 16:9 display.
5. Search for width restrictions. Inspect the video, iframe, embed block, and parent containers for width or max-width rules.
6. Remove the limiting max-width. Unset the custom maximum width for video embed blocks so they can expand to the available container width.
7. Keep the iframe positioned inside the wrapper. Confirm that the iframe fills the wrapper without introducing overflow or changing the aspect ratio.
8. Scope the CSS to videos. Avoid removing maximum-width rules from all embeds if documents, maps, or other media require different sizing.
9. Test the YouTube Wizard workflow. Add a fresh video through the plugin and verify that editors no longer need custom HTML.
10. Test a normal YouTube embed. Confirm that the standard module also displays at full width.
11. Check playback and full-screen controls. Make sure the sizing changes do not block player controls or full-screen functionality.
12. Test responsive widths. Review the video on desktop, tablet, and mobile to confirm that it scales without distortion or horizontal scrolling.
13. Clear generated CSS and caches. Purge the theme, page builder, WordPress, hosting, CDN, and browser caches after saving the changes.

A simplified version of the CSS adjustment might look like this:

.video-embed {
    position: relative;
    width: 100%;
    max-width: none;
    padding-top: 56.333%;
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

The production selectors should match the markup generated by the active theme, page builder, and YouTube Wizard configuration. Avoid copying a generic class without inspecting the actual embed structure.

Final outcome

The forced video-wrapper padding was changed from 52% to 56.333%, correcting the intended responsive aspect ratio.

A separate custom max-width restriction was also removed from the video embed block. After both changes, YouTube Wizard videos and standard YouTube embeds expanded to the full available width and no longer displayed the unwanted side bars.

Editors could continue adding videos through the normal WordPress interface without relying on custom iframe HTML.

The key lesson is that black bars around an embedded video are not always part of the video itself. The wrapper’s aspect-ratio padding and width constraints should be inspected before changing the media or replacing the embed plugin.

For help troubleshooting YouTube Wizard, responsive WordPress video embeds, or custom CSS conflicts, contact Freshy.