{"id":555,"date":"2026-10-24T18:00:03","date_gmt":"2026-10-24T18:00:03","guid":{"rendered":"https:\/\/html-editor-online.com\/blog?p=555"},"modified":"2026-10-24T18:00:03","modified_gmt":"2026-10-24T18:00:03","slug":"make-wysiwyg-video-embed-responsive","status":"publish","type":"post","link":"https:\/\/html-editor-online.com\/blog\/make-wysiwyg-video-embed-responsive\/","title":{"rendered":"Make WYSIWYG Video Embed Responsive: Fit an iframe on Phones"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">To make WYSIWYG video embed responsive, add the video with the visual editor&#8217;s toolbar control, export the markup, and then let CSS on the published page control the iframe&#8217;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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The input is an iframe inside an exported HTML fragment. The output is the same iframe inside a wrapper that follows its container&#8217;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.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li class=\"\"><a href=\"#steps-to-make-wysiwyg-video-embed-responsive-1\">Steps to make WYSIWYG video embed responsive<\/a><\/li><li class=\"\"><a href=\"#why-an-iframe-that-fits-in-the-editor-overflows-on-a-phone-2\">Why an iframe that fits in the editor overflows on a phone<\/a><\/li><li class=\"\"><a href=\"#copy-ready-html-and-css-for-a-responsive-iframe-3\">Copy-ready HTML and CSS for a responsive iframe<\/a><\/li><li class=\"\"><a href=\"#where-to-make-wysiwyg-video-embed-responsive-changes-4\">Where to make WYSIWYG video embed responsive changes<\/a><\/li><li class=\"\"><a href=\"#test-the-result-at-narrow-widths-and-on-a-real-phone-5\">Test the result at narrow widths and on a real phone<\/a><\/li><li class=\"\"><a href=\"#troubleshooting-fixed-styles-narrow-parents-and-wrong-ratios-6\">Troubleshooting fixed styles, narrow parents and wrong ratios<\/a><\/li><li class=\"\"><a href=\"#frequently-asked-questions\">Frequently asked questions<\/a><\/li><li class=\"\"><a href=\"#next-steps\">Next steps<\/a><\/li><li class=\"\"><a href=\"#sources\">Sources and further reading<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-1-541-1-a982f7547b08b83e-1024x576.jpg\" alt=\"Illustration of a developer adding a video block in a visual editor before exporting the markup\" class=\"wp-image-560\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-1-541-1-a982f7547b08b83e-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-1-541-1-a982f7547b08b83e-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-1-541-1-a982f7547b08b83e-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-1-541-1-a982f7547b08b83e.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"steps-to-make-wysiwyg-video-embed-responsive-1\">Steps to make WYSIWYG video embed responsive<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Begin in the <a href=\"https:\/\/html-editor-online.com\/\" title=\"WYSIWYG HTML Editor\">WYSIWYG HTML Editor<\/a>. 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.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Place the cursor where the video belongs and use the video-embed control in the toolbar to add it.<\/li>\n\n\n\n<li>Choose <strong>Copy HTML<\/strong> to put the markup on your clipboard, or <strong>Download HTML<\/strong> to save it as a file.<\/li>\n\n\n\n<li>Find the <code>iframe<\/code> in the exported markup and note its <code>src<\/code>, <code>width<\/code>, <code>height<\/code> and any <code>style<\/code> attribute. The exact attributes depend on what the editor produces and on the provider&#8217;s embed URL, so inspect them instead of assuming.<\/li>\n\n\n\n<li>Paste the fragment into a complete sample page in the HTML Code Editor and add the layout CSS shown further down.<\/li>\n\n\n\n<li>Copy the working CSS into the stylesheet of the site that publishes the content.<\/li>\n\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Do not judge phone fit from the editor&#8217;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.<\/p>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6addc65fc083e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6addc65fc083e\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-2-541-2-675945344d5bac52-1024x576.jpg\" alt=\"Illustration of a wide video frame overflowing a narrow phone-sized column\" class=\"wp-image-563\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-2-541-2-675945344d5bac52-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-2-541-2-675945344d5bac52-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-2-541-2-675945344d5bac52-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-2-541-2-675945344d5bac52.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"why-an-iframe-that-fits-in-the-editor-overflows-on-a-phone-2\">Why an iframe that fits in the editor overflows on a phone<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An embedded video is normally an <code>iframe<\/code>. The <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/iframe-embed-object.html\" title=\"HTML Standard\" target=\"_blank\" rel=\"noopener\">WHATWG HTML Standard<\/a> defines <code>width<\/code> and <code>height<\/code> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Two further details make this worse. First, the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Box_sizing\/Aspect_ratios\" title=\"Understanding and setting aspect ratios - CSS | MDN\" target=\"_blank\" rel=\"noopener\">MDN guide to aspect ratios<\/a> explains that an iframe does not pick up the embedded video&#8217;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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/html-editor-online.com\/blog\/what-is-wysiwyg-editor\/\" title=\"What Is WYSIWYG Editor\">how a WYSIWYG editor works<\/a> 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.<\/p>\n\n\n<div class=\"wp-block-image heo-auto-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6addc65fc12d0&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6addc65fc12d0\" class=\"aligncenter size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-3-541-3-b7f73786188123f7-1024x576.jpg\" alt=\"Illustration of a code editor and phone preview showing a video tile that fits both widths\" class=\"wp-image-565\" srcset=\"https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-3-541-3-b7f73786188123f7-1024x576.jpg 1024w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-3-541-3-b7f73786188123f7-300x169.jpg 300w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-3-541-3-b7f73786188123f7-768x432.jpg 768w, https:\/\/html-editor-online.com\/blog\/wp-content\/uploads\/2026\/10\/make-wysiwyg-video-embed-responsive-image-3-541-3-b7f73786188123f7.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"copy-ready-html-and-css-for-a-responsive-iframe-3\">Copy-ready HTML and CSS for a responsive iframe<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Paste this complete test page into the <a href=\"https:\/\/html-editor-online.com\/editors\/html\" title=\"HTML Code Editor\">HTML Code Editor<\/a>. Replace the <code>src<\/code> with the video provider&#8217;s real embed URL. The address below is a placeholder and will not play a video.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n  &lt;title&gt;Responsive video embed test&lt;\/title&gt;\n  &lt;style&gt;\n    .video-embed {\n      width: 100%;\n      max-width: 720px;\n      margin-inline: auto;\n    }\n    .video-embed iframe {\n      display: block;\n      width: 100%;\n      height: auto;\n      aspect-ratio: 16 \/ 9;\n      border: 0;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=&quot;video-embed&quot;&gt;\n    &lt;iframe src=&quot;https:\/\/www.example.com\/embed\/sample-video&quot; title=&quot;Sample walkthrough video&quot; width=&quot;560&quot; height=&quot;315&quot; loading=&quot;lazy&quot; allowfullscreen&gt;&lt;\/iframe&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Each rule has one job:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>width: 100%<\/code> on the iframe makes it follow the width of its parent instead of the 560 in the attribute.<\/li>\n\n\n\n<li><code>max-width: 720px<\/code> on the optional wrapper stops the video from growing without limit on large screens, and <code>margin-inline: auto<\/code> centers it.<\/li>\n\n\n\n<li><code>height: auto<\/code> releases the fixed height so the ratio can decide it.<\/li>\n\n\n\n<li><code>aspect-ratio: 16 \/ 9<\/code> supplies 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.<\/li>\n\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/aspect-ratio\" title=\"aspect-ratio CSS property - CSS | MDN\" target=\"_blank\" rel=\"noopener\">MDN aspect-ratio reference<\/a> notes that the property affects preferred sizing only when at least one dimension is automatic, which is why <code>height: auto<\/code> matters. The <code>title<\/code> attribute gives the frame an accessible name, so keep it descriptive when you swap in your own video.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"where-to-make-wysiwyg-video-embed-responsive-changes-4\">Where to make WYSIWYG video embed responsive changes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The editor&#8217;s Source view lets you inspect the markup, but applying changes back through the visual editor can remove unsupported classes and styles. A <code>video-embed<\/code> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That split also explains where each piece belongs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Exported fragment:<\/strong> the iframe, and a wrapper element if your publishing platform keeps it.<\/li>\n\n\n\n<li><strong>Page head:<\/strong> the viewport meta tag, which only belongs in a document you control. It does not belong in a content-only fragment. The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/meta\/name\/viewport\" title=\"HTML attribute value - HTML | MDN\" target=\"_blank\" rel=\"noopener\">MDN viewport reference<\/a> describes what the tag does.<\/li>\n\n\n\n<li><strong>Site stylesheet:<\/strong> the rules for <code>.video-embed<\/code> and its iframe, so every published video uses them.<\/li>\n\n\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you prefer drafting the rules on their own, the <a href=\"https:\/\/html-editor-online.com\/editors\/css\" title=\"CSS Editor\">CSS Editor<\/a> 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"test-the-result-at-narrow-widths-and-on-a-real-phone-5\">Test the result at narrow widths and on a real phone<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A layout fix is only proven when you test it where readers will see it. Work through this checklist:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Narrow the browser window or the preview pane until the column is about phone width and watch for horizontal scrolling.<\/li>\n\n\n\n<li>Confirm the video box keeps its 16:9 shape as the width changes, with no tall or flat strip.<\/li>\n\n\n\n<li>Check the computed styles of the iframe and each parent. Look at width, padding and any minimum width.<\/li>\n\n\n\n<li>Confirm the published page has a viewport meta tag in its head.<\/li>\n\n\n\n<li>Open the real published page on an actual phone where possible.<\/li>\n\n\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Responsive CSS changes the iframe box. It does not change the layout or controls inside a third-party player. Browser support for <code>aspect-ratio<\/code> matters too. MDN&#8217;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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"troubleshooting-fixed-styles-narrow-parents-and-wrong-ratios-6\">Troubleshooting fixed styles, narrow parents and wrong ratios<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If the video still protrudes or looks wrong, match the symptom to a likely cause:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Symptom<\/th><th>Likely cause<\/th><th>What to check<\/th><\/tr><\/thead><tbody><tr><td>Video wider than the screen<\/td><td>Fixed inline width, or a fixed-width ancestor<\/td><td>Computed width of the iframe and every parent<\/td><\/tr><tr><td>Flat or oddly tall frame<\/td><td>Inline height, or a rule overriding <code>height: auto<\/code><\/td><td>The <code>style<\/code> attribute and theme CSS<\/td><\/tr><tr><td>Black bars inside the player<\/td><td>Wrapper ratio differs from the video&#8217;s ratio<\/td><td>Set <code>aspect-ratio<\/code> to the video&#8217;s real proportions<\/td><\/tr><tr><td>Smaller than expected on desktop<\/td><td>The wrapper&#8217;s <code>max-width<\/code><\/td><td>Raise or remove the cap<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If the exported iframe carries inline width or height styles, remove them when you integrate it, then check whether the publishing site&#8217;s CSS overrides your example. When two rules compete, <a href=\"https:\/\/html-editor-online.com\/blog\/css-where-specificity-rule-not-applying\/\" title=\"CSS Where Specificity Rule Not Applying\">specificity decides which rule wins<\/a>, so compare the selectors before adding <code>!important<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/html-editor-online.com\/blog\/why-flexbox-card-wont-shrink-long-url\/\" title=\"Why Flexbox Card Wont Shrink Long URL\">why a flexbox card will not shrink around a long URL<\/a>. Fix the container and the iframe follows. For a genuinely portrait video, use a ratio such as <code>9 \/ 16<\/code> and a smaller <code>max-width<\/code> so it does not become taller than the screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frequently-asked-questions\">Frequently asked questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-1\">Does the visual editor make an embedded video responsive automatically?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-2\">Why can&#039;t I judge phone fit from the editor&#039;s preview?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The editor&#8217;s on-page preview is plain text, and the export is a content fragment without your site&#8217;s head or CSS. Test the markup in a complete page, such as the HTML Code Editor, and then on the published page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-3\">Can I just delete the width and height attributes from the iframe?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-4\">Why does height: auto still leave my iframe the wrong height?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-5\">How do I handle a portrait video?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Change the ratio to match the video, for example aspect-ratio: 9 \/ 16, and lower the wrapper&#8217;s max-width so the frame does not grow taller than the screen. A mismatched ratio shows up as black bars inside the player.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-6\">Is aspect-ratio safe to rely on across browsers?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">MDN&#8217;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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"faq-7\">Will this change the controls inside the video player?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. Responsive CSS changes the iframe&#8217;s box only. The player&#8217;s own layout and controls are set by the video provider, and a placeholder source URL cannot be expected to play at all.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"next-steps\">Next steps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To make WYSIWYG video embed responsive, remember the division of labor. The visual editor adds and exports the iframe, and the published page&#8217;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 <strong>Copy HTML<\/strong>, paste the fragment into the HTML Code Editor test page, and then move the working rules into your site&#8217;s stylesheet. If you want a broader view of the visual workflow first, the <a href=\"https:\/\/html-editor-online.com\/blog\/online-wysiwyg-html-editor\/\" title=\"Online WYSIWYG HTML Editor\">online WYSIWYG HTML editor guide<\/a> covers it. Then test the live page on a real phone.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Related tools and resources on HTML Editor Online:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/html-editor-online.com\/blog\/online-wysiwyg-html-editor\/\">Online WYSIWYG HTML Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/\">WYSIWYG HTML Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/blog\/what-is-wysiwyg-editor\/\">What Is WYSIWYG Editor<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html-editor-online.com\/editors\/html\">HTML Code Editor<\/a><\/li>\n\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sources\">Sources and further reading<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Box_sizing\/Aspect_ratios\" target=\"_blank\" rel=\"noopener\">Understanding and setting aspect ratios &#8211; CSS | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Elements\/meta\/name\/viewport\" target=\"_blank\" rel=\"noopener\">HTML attribute value &#8211; HTML | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/aspect-ratio\" target=\"_blank\" rel=\"noopener\">aspect-ratio CSS property &#8211; CSS | MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/html.spec.whatwg.org\/multipage\/iframe-embed-object.html\" target=\"_blank\" rel=\"noopener\">HTML Standard<\/a><\/li>\n\n\n<\/ul>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Make a WYSIWYG video embed responsive by exporting the iframe markup, then letting CSS width and aspect-ratio fit it to a phone screen.<\/p>\n","protected":false},"author":1,"featured_media":558,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[165,139,166,164,163,138],"class_list":["post-555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wysiwyg","tag-css-aspect-ratio","tag-html-export","tag-mobile-layout","tag-responsive-iframe","tag-video-embed","tag-wysiwyg-editor"],"_links":{"self":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/comments?post=555"}],"version-history":[{"count":4,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/555\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/posts\/555\/revisions\/566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/media\/558"}],"wp:attachment":[{"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/media?parent=555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/categories?post=555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-editor-online.com\/blog\/wp-json\/wp\/v2\/tags?post=555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}