To make WYSIWYG video embed responsive, add the video with the visual editor’s toolbar control, export the markup, and then let CSS on the published page control the iframe’s width and aspect ratio. The visual editor does not add responsive video styling for you, so an iframe that looks fine while you edit can still overflow a narrow phone column.
The input is an iframe inside an exported HTML fragment. The output is the same iframe inside a wrapper that follows its container’s width and keeps a 16:9 shape. Use the WYSIWYG editor on this site to add and export the video, then use the HTML Code Editor to test a small-screen example. The details below were checked on October 24, 2026.
Table of Contents
Steps to make WYSIWYG video embed responsive
Begin in the WYSIWYG HTML Editor. It is a visual rich-text editor with a video-embed control in the toolbar, an HTML source view, and export options. Treat the visual editor as the place where you add the video and treat your page CSS as the place where you make it fit.
- Place the cursor where the video belongs and use the video-embed control in the toolbar to add it.
- Choose Copy HTML to put the markup on your clipboard, or Download HTML to save it as a file.
- Find the
iframein the exported markup and note itssrc,width,heightand anystyleattribute. The exact attributes depend on what the editor produces and on the provider’s embed URL, so inspect them instead of assuming. - Paste the fragment into a complete sample page in the HTML Code Editor and add the layout CSS shown further down.
- Copy the working CSS into the stylesheet of the site that publishes the content.
Do not judge phone fit from the editor’s on-page preview. That preview is plain text, so it cannot show how a published video will behave in a narrow column. The export is also a content fragment, not a full page with a head or site-wide CSS, which means nothing in it can carry a viewport setting or a stylesheet for your site.
Why an iframe that fits in the editor overflows on a phone
An embedded video is normally an iframe. The WHATWG HTML Standard defines width and height attributes for it, and those attributes give the frame fixed starting dimensions. They do not make it responsive. If the exported iframe says 560 wide and your published column is 360 pixels wide on a phone, the frame is wider than the space it lives in.
Two further details make this worse. First, the MDN guide to aspect ratios explains that an iframe does not pick up the embedded video’s proportions the way a video element typically can. The browser does not know the video is 16:9, so you must supply that ratio in CSS. Second, the width has to be allowed to follow the container. A fixed inline width, or a parent with a fixed width, stops that from happening.
This is why a wide editing area is misleading. Space is generous there, so a fixed-size frame looks fine. If you want background on why visual editors behave this way, read about how a WYSIWYG editor works as a translation layer between what you click and the markup it emits. The takeaway is that the markup is only half of the layout. The stylesheet on the page that shows the content supplies the other half.
Copy-ready HTML and CSS for a responsive iframe
Paste this complete test page into the HTML Code Editor. Replace the src with the video provider’s real embed URL. The address below is a placeholder and will not play a video.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive video embed test</title>
<style>
.video-embed {
width: 100%;
max-width: 720px;
margin-inline: auto;
}
.video-embed iframe {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}
</style>
</head>
<body>
<div class="video-embed">
<iframe src="https://www.example.com/embed/sample-video" title="Sample walkthrough video" width="560" height="315" loading="lazy" allowfullscreen></iframe>
</div>
</body>
</html>Each rule has one job:
width: 100%on the iframe makes it follow the width of its parent instead of the 560 in the attribute.max-width: 720pxon the optional wrapper stops the video from growing without limit on large screens, andmargin-inline: autocenters it.height: autoreleases the fixed height so the ratio can decide it.aspect-ratio: 16 / 9supplies the proportions the iframe does not have. The 560 by 315 attributes express the same ratio as a starting size, and CSS controls the rendered size.
The MDN aspect-ratio reference notes that the property affects preferred sizing only when at least one dimension is automatic, which is why height: auto matters. The title attribute gives the frame an accessible name, so keep it descriptive when you swap in your own video.
Where to make WYSIWYG video embed responsive changes
The editor’s Source view lets you inspect the markup, but applying changes back through the visual editor can remove unsupported classes and styles. A video-embed wrapper class that you type into Source view may therefore not survive the round trip. Make and test layout changes in the HTML Code Editor, or in the stylesheet of the site where the content will be published.
That split also explains where each piece belongs:
- Exported fragment: the iframe, and a wrapper element if your publishing platform keeps it.
- Page head: the viewport meta tag, which only belongs in a document you control. It does not belong in a content-only fragment. The MDN viewport reference describes what the tag does.
- Site stylesheet: the rules for
.video-embedand its iframe, so every published video uses them.
If you prefer drafting the rules on their own, the CSS Editor offers syntax highlighting and property auto-completion. Its live preview uses a sample page rather than your content, so test the iframe itself in the HTML Code Editor. Neither editor lints your CSS, so a mistyped property will not be flagged for you.
Test the result at narrow widths and on a real phone
A layout fix is only proven when you test it where readers will see it. Work through this checklist:
- Narrow the browser window or the preview pane until the column is about phone width and watch for horizontal scrolling.
- Confirm the video box keeps its 16:9 shape as the width changes, with no tall or flat strip.
- Check the computed styles of the iframe and each parent. Look at width, padding and any minimum width.
- Confirm the published page has a viewport meta tag in its head.
- Open the real published page on an actual phone where possible.
Keep the checks separate. A box that fits proves the layout works. It does not prove that the provider allows the embed, that the video plays, or that the player’s own controls are easy to use. The placeholder address in the example cannot play at all, so judge playback only with your real embed URL.
Responsive CSS changes the iframe box. It does not change the layout or controls inside a third-party player. Browser support for aspect-ratio matters too. MDN’s reference, last modified July 21, 2026, labels it widely available across browsers since September 2021. Older browsers may behave differently, so test in the ones you support instead of assuming identical results.
Troubleshooting fixed styles, narrow parents and wrong ratios
If the video still protrudes or looks wrong, match the symptom to a likely cause:
| Symptom | Likely cause | What to check |
|---|---|---|
| Video wider than the screen | Fixed inline width, or a fixed-width ancestor | Computed width of the iframe and every parent |
| Flat or oddly tall frame | Inline height, or a rule overriding height: auto | The style attribute and theme CSS |
| Black bars inside the player | Wrapper ratio differs from the video’s ratio | Set aspect-ratio to the video’s real proportions |
| Smaller than expected on desktop | The wrapper’s max-width | Raise or remove the cap |
If the exported iframe carries inline width or height styles, remove them when you integrate it, then check whether the publishing site’s CSS overrides your example. When two rules compete, specificity decides which rule wins, so compare the selectors before adding !important.
A narrow parent is the other common culprit. Padding, a fixed width or a minimum width on a column can keep the video from shrinking, much like the situation I describe in why a flexbox card will not shrink around a long URL. Fix the container and the iframe follows. For a genuinely portrait video, use a ratio such as 9 / 16 and a smaller max-width so it does not become taller than the screen.
Frequently asked questions
Does the visual editor make an embedded video responsive automatically?
No. Use the video-embed control to add the video and Copy HTML or Download HTML to inspect the result, but do not assume it includes responsive styling. Width and aspect ratio come from CSS on the page that publishes the content.
Why can't I judge phone fit from the editor's preview?
The editor’s on-page preview is plain text, and the export is a content fragment without your site’s head or CSS. Test the markup in a complete page, such as the HTML Code Editor, and then on the published page.
Can I just delete the width and height attributes from the iframe?
You can, but the browser then falls back to its default frame size unless CSS sets one. It is usually better to keep the attributes as starting dimensions and let CSS control the rendered size with width and aspect-ratio.
Why does height: auto still leave my iframe the wrong height?
The aspect-ratio property affects sizing only when at least one dimension is automatic. An inline height style or a theme rule can override height: auto, so inspect the computed styles and remove or outrank the competing rule.
How do I handle a portrait video?
Change the ratio to match the video, for example aspect-ratio: 9 / 16, and lower the wrapper’s max-width so the frame does not grow taller than the screen. A mismatched ratio shows up as black bars inside the player.
Is aspect-ratio safe to rely on across browsers?
MDN’s property reference, last modified July 21, 2026, labels it widely available across browsers since September 2021. Older browsers may differ, so check the browsers you support instead of promising identical behavior.
Will this change the controls inside the video player?
No. Responsive CSS changes the iframe’s box only. The player’s own layout and controls are set by the video provider, and a placeholder source URL cannot be expected to play at all.
Next steps
To make WYSIWYG video embed responsive, remember the division of labor. The visual editor adds and exports the iframe, and the published page’s CSS decides how wide it is and what shape it keeps. Your next step is to add a video with the toolbar control, use Copy HTML, paste the fragment into the HTML Code Editor test page, and then move the working rules into your site’s stylesheet. If you want a broader view of the visual workflow first, the online WYSIWYG HTML editor guide covers it. Then test the live page on a real phone.
Related tools and resources on HTML Editor Online:
