Troubleshooting issues with images and videos in the new article editor

<p>When you move to the new article editor, you might see issues with images and videos, such as extra space, no borders, or videos that do not display correctly.</p><p>This article covers:</p><div style="margin-bottom: 20px; text-align: right;">
<button id="master-toggle" class="btn fw-semibold text-dark" data-action="expand" style="background-color: #DEF991; border: none; outline: none; border-radius: 7px; padding: 10px 20px; font-size: 15px; transition: background-color 0.2s ease;" onmouseover="this.style.backgroundColor='#cbef6d'" onmouseout="this.style.backgroundColor='#DEF991'">
Expand all tabs
</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.getElementById('master-toggle');

toggleBtn.addEventListener('click', function () {
const action = this.getAttribute('data-action');
const headers = document.querySelectorAll('.accordion');

headers.forEach(header => {
const isActive = header.classList.contains('active');
const panel = header.nextElementSibling; // Grabs the corresponding .panel container

if (action === 'expand' && !isActive) {
// Open it by simulating a standard click
header.click();
} else if (action === 'collapse' && isActive) {
// Close it by simulating a standard click
header.click();
}
});

// Flip button text and states
if (action === 'expand') {
this.setAttribute('data-action', 'collapse');
this.textContent = 'Collapse all tabs';
} else {
this.setAttribute('data-action', 'expand');
this.textContent = 'Expand all tabs';
}
});
});
</script><div class="accordion"><h3 id="h_01K9Z92S3WRJ3P9XETZ7DA02XW">Troubleshoot issues with images</h3></div><div class="panel">
<h3 id="h_01KAH6XRDAWEHB2WGBH63HQ52Y">Add borders to images</h3>
<p>The new article editor does not support the table-based image borders used in the legacy editor. To add borders, use the image style options or apply a custom CSS class to images.</p>
<p>To add image borders with a CSS class:</p>
<ol>
<li id="e83d39fdcd1aded8b112e31c20684ffa9" data-list-item-id="efa351f6a96f2247a59f1e328febc1684">
<p>Insert your image into the article<br> </p>
<p><img class="wysiwyg-image-resized" style="aspect-ratio: 1424/782; width: 62.23%;" src="https://support.zendesk.com/hc/article_attachments/10573555896218" alt="Add image to article.png" width="1424" height="782"></p>
</li>
<li id="ef1fc766e02877b862da20f9f3066007d" data-list-item-id="eb549628d907bb62d8c02a24dbf4f7561">Click the <strong>HTML</strong> button in the toolbar to open the source code editor <img class="wysiwyg-image-resized" style="aspect-ratio: 1316/648; width: 75%;" src="https://support.zendesk.com/hc/article_attachments/9970573051290" alt="Source code icon" width="1316" height="648">
</li>
<li id="e03b92b6c1627bc634edb2aa74fab4425" data-list-item-id="ed2e889999e0a1edd214070407692b54c">Find the <code>img</code> element for your image in the source. Add a CSS class name, for example, <code>bordered-image</code>. Set <code>class="bordered-image"</code> on the <code>img</code> element.</li>
<li id="e25958d9891b1f4a6ea4fff250093143b" data-list-item-id="e4561884327e8031e3e9238e66c1bc57a">Save your changes</li>
<li id="eab36e5975b3e2b9825840b5c2be19c18" data-list-item-id="ef60f69e6d963eeea0372e3e0ae48958f">Make sure your help center CSS includes the border style. For example:</li>
</ol>
<pre class="language-auto wysiwyg-code-block"><code class="language-auto">.bordered-image {
border: 1px solid #ccc;
border-radius: 4px;
}</code></pre>
<p>To add image borders with inline styles:</p>
<ol>
<li id="e7851d7f569d723a37f85800dbe8027c2" data-list-item-id="ea6776173181eac0de097a62731097092">Insert your image into the article <img class="wysiwyg-image-resized" style="aspect-ratio: 1424/782; width: 77.99%;" src="https://support.zendesk.com/hc/article_attachments/10573555896218" alt="Add image to article.png" width="1424" height="782">
</li>
<li id="e5a4003d74349e61b746170fbc58b4c55" data-list-item-id="ee06259e2652cbebd12846d3a2f8e0be9">Click the <strong>HTML</strong> button in the toolbar to open the source code editor <img class="wysiwyg-image-resized" style="aspect-ratio: 1316/648; width: 75%;" src="https://support.zendesk.com/hc/article_attachments/9970573051290" alt="Source code icon" width="1316" height="648">
</li>
<li id="eb79ff109988b4665b5dc87a93a8eac26" data-list-item-id="e7c480d7da728eaa3b90dbe207c1ac883">In the source, find the <code>img</code> element for your image. Locate the <code>style=""</code> attribute or add it.</li>
<li id="e89cfc3ad6293a39b14bd079637b7a289" data-list-item-id="e49946c704e7759f32f3c708227125104">
<p>Add the border styles here, for example:</p>
<pre class="language-auto wysiwyg-code-block"><code class="language-auto">border-radius: 8px; border: 10px solid black;</code></pre>
</li>
<li id="ec84d4096ed3cf4b0d0fefa6e978f8f3b" data-list-item-id="e4f474f7852175b60a0798d03ce2fffcb">
<p>The <code>style</code> attribute should look like</p>
<pre class="language-auto wysiwyg-code-block"><code class="language-auto">style="aspect-ratio: 1600/1067; border: 10px solid black; border-radius: 8px;" </code></pre>
</li>
<li id="e62cf21dd7591fd181eb034985ae64a18" data-list-item-id="ed6f68672f96f0da926881516e57822d8">Save your changes</li>
</ol>
<h3 id="h_01KAH6XRDBMVTR89NHQMVBQYJ5">Prevent image distortion and manage image size</h3>
<ul>
<li id="e6a388b5e094e464a5db35350b1052952" data-list-item-id="e697ec8b7268bcbf8f85eed7dd8e50c4b">Do not resize images in the new article editor unless you must. If you resize an image, change only one dimension, width or height, to keep the aspect ratio. The editor scales the other dimension automatically.</li>
<li id="e198551750fde074d27bf9546cf217bee" data-list-item-id="e508ccfe76968fc70e219d10f35777543">Use an external tool, such as Photoshop, GIMP, or an online editor, to resize images before you upload them</li>
<li id="e875cba1ec266a03edbe59cf525ae32d4" data-list-item-id="eb207dd8706e4db3e2b0cabbcc6f3184a">Use the Insert image button instead of copy and paste. Copy and paste can add unwanted HTML attributes.</li>
<li id="eaff55132fcf7d0b6c5216b54d21f9854" data-list-item-id="eca45b46a4bd0592c133ee24e2d3d71c6">After you insert an image, select it and use the image toolbar to set the width to 100%, or add this CSS to your help center theme for a global solution</li>
</ul>
<pre class="language-auto wysiwyg-code-block"><code class="language-auto">.article-body img {
width: 100%;
height: auto;
}</code></pre>
<ul><li id="e88a90a1d1a31d30179e6cddfe98043e0" data-list-item-id="eefef72ac0473c1a20f7c4dd951397220">If images look distorted in notification emails, remove width and height HTML attributes from the <code>&lt;img&gt;</code> tag, use CSS to set the size—although some email clients strip CSS attributes, or make sure the editor removes the attributes and uses CSS for pasted images</li></ul>
<h3 id="h_01KAH6XRDCR6PQ6MZM1T19C5XB">Figure and aspect ratio styles removed with inserted images after a line break with ordered or unordered lists</h3>
<p>Figure and aspect ratio styles disappear with images inserted after a line break <code>&lt;br&gt;</code> with numbered and bulleted lists.</p>
<p>Use the <strong>Break Text</strong> feature from the image toolbar:</p>
<ol>
<li data-list-item-id="e60caa7778b4e61bb9fa37a62d2c9529b">Insert a numbered or bulleted list</li>
<li data-list-item-id="eb52ca73171373659998ae0afc00e091a">Add a break</li>
<li data-list-item-id="e3b7e278e8f559399130f6e64184ef34a">Insert an image</li>
<li data-list-item-id="e3c6a4d28de0ee3b611e8cfdda31ae096">Click on the image so the image toolbar appears<img src="https://support.zendesk.com/hc/article_attachments/10619631393562" width="363" height="70">
</li>
<li data-list-item-id="ec60621753b79c22e92542fa92256f2ee">
<p>Click <strong>Break Text</strong> from the image toolbar</p>
<p><img src="https://support.zendesk.com/hc/article_attachments/10619631393690" width="363" height="70"></p>
</li>
<li data-list-item-id="eb3651cee44b4e77c60b7b56be2853e0c">An extra line appears that you can delete</li>
</ol>
<p>The workaround will add a <code>&lt;p&gt;&amp;nbsp;&lt;/p&gt;</code> instead of a <code>&lt;br&gt;</code>.</p>
<h3 id="h_01KQCRXFFQKRF5DFB1BC7J0HM7">Additional tips and fixes</h3>
<ul>
<li id="eb2ec36087def20adf4d5b3b46801b849" data-list-item-id="e9ed29b77cbdebe49d6d15999fb9e41cc">If you're part of an Early Access Program (EAP), report the specific articles and grant account access for investigation</li>
<li id="e4086ba3d7241be4e7db43ae09632a430" data-list-item-id="e5140f27454251448e5499b5c653c03c5">If you do not manage your help center theme, contact your theme admin or developer to request CSS changes</li>
<li id="e462b848f884b16654fec560eff2c7ac2" data-list-item-id="e03966cd0e58cdc9c491d86cc6b4ef9e6">Test changes in a test environment before you apply them live</li>
<li id="e9670292877deb14ab14ce6c8862fe32c" data-list-item-id="e1dc9e14f7c82c5b5eca063e31d7ee419">Clear your browser cache after you make CSS or theme changes to see the latest updates</li>
<li id="e6e97dceb2cf4b277412fab9d6db2351b" data-list-item-id="e28b9691c62b9b15dcc19aaf8dca26919">For large-scale migrations, use browser developer tools to find problem tables and speed up the review process, or make manual adjustments in each affected article since there is no bulk migration or fix tool</li>
</ul>
<p>These steps resolve most image and video display issues after you move from the legacy editor to the new article editor. They help you keep a consistent, professional look in your help center articles.</p>
</div><div class="accordion"><h3 id="h_01K9Z92S4FZ50PXSZC7R0GG7ZT">Troubleshoot issues with videos</h3></div><div class="panel">
<p>If you move from the legacy editor to the new article editor, embedded videos may appear differently in your help center articles. This section shows how to make embedded videos display correctly, especially with custom embed codes or nonstandard video platforms.</p>
<p>To make embedded videos display correctly:</p>
<ul>
<li id="e6463a1a7e3cb14eabaf3ff05bd0fb2d1" data-list-item-id="e53d6c5d3cc0723db518c19a7069afbec">Turn on the <strong>Display unsafe content</strong> setting in your help center admin settings</li>
<li id="e64ad10429ca87b8ad0d3f22d2555dba9" data-list-item-id="e632dbed2f750b2ff2f9146c2d1e5e93c">This setting allows iframes and scripts to render in articles</li>
<li id="e8bd4012864045d4fb0206b31da3091f0" data-list-item-id="eaf7d04119dee7f06e08b5f52b6fcf65e">If you have security concerns, consult your IT or security team before you turn on this setting because it has security implications</li>
</ul>
<p>Only iframe-based embed codes are supported for video embeds in the new article editor. Other methods, such as script tags, direct links, or custom div tags, are not supported and do not render in the editor or published articles.</p>
<p>You can insert an embedded video in two ways:</p>
<ul>
<li id="edebc5203a2bb9bea05e54254325f4462" data-list-item-id="e156fe78d6578cd97e10a3e4dad7c2f59">Click <strong>Insert into article</strong> &gt; <strong>Embed</strong> in the toolbar <img class="wysiwyg-image-resized" style="aspect-ratio: 1434/898; width: 74.05%;" src="https://support.zendesk.com/hc/article_attachments/10573555896346" alt="Embed option location in toolbar.png" width="1434" height="898">
</li>
<li id="ed71a8e97052924dfd31c88a220ea08a0" data-list-item-id="e9509eac0f8d8e052fe53a6425dec9e3a">Paste an iframe embed code directly into the article source code, ensuring that if your articles used non-iframe embeds, you update them to use iframe-based embed codes from your video provider, or if you already used iframes, turn on <strong>Display unsafe content</strong> so they render without updating each article</li>
</ul>
<h3 id="h_01KAH6XRDD4QTYX7HW6KFP1AT7">Adjust video size</h3>
<p>The new article editor might set embedded videos to 100% width by default. To change the size, use CSS, not HTML width attributes:</p>
<pre class="language-auto wysiwyg-code-block"><code class="language-auto">.article-body iframe {
width: 50% !important;
}</code></pre>
<div class="p"><div class="note attention">
<span class="attentiontitle">Attention:</span> Do not edit video width directly in the HTML editor. The new article editor may overwrite the change.</div></div>
<p>If videos appear as small thumbnails or do not display as expected:</p>
<ol>
<li id="e840d031888bbf3b9096813e17ee140f7" data-list-item-id="e7c0017634dca6ceaf701092cc6b859c4">Confirm that <strong>Display unsafe content</strong> is turned on</li>
<li id="e8765af35e60c17922ca94ecf99b4dce7" data-list-item-id="eb0769ce3f2a708e2dc07df85c59e61c7">Make sure you use an iframe-based embed code</li>
<li id="eae9d0103cf16e854f832b7872ba87709" data-list-item-id="edbdb629658e45cca7734ab13a08bf132">If the issue persists, report it with your embed code details and screenshots to your support contact or product manager</li>
</ol>
</div>