Troubleshooting issues with images and videos in the new article editor

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.

This article covers:

Troubleshoot issues with images

Troubleshoot issues with videos

Troubleshoot issues with images

Add borders to images

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.

To add image borders with a CSS class:

Insert your image into the article

Click the HTML button in the toolbar to open the source code editor

Find the img element for your image in the source. Add a CSS class name, for example, bordered-image. Set class="bordered-image" on the img element.

Save your changes

Make sure your help center CSS includes the border style. For example:

.bordered-image {
border: 1px solid #ccc;
border-radius: 4px;
}

To add image borders with inline styles:

Insert your image into the article

Click the HTML button in the toolbar to open the source code editor

In the source, find the img element for your image. Locate the style="" attribute or add it.

Add the border styles here, for example:

border-radius: 8px; border: 10px solid black;

The style attribute should look like

style="aspect-ratio: 1600/1067; border: 10px solid black; border-radius: 8px;"

Save your changes

Prevent image distortion and manage image size

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.

Use an external tool, such as Photoshop, GIMP, or an online editor, to resize images before you upload them

Use the Insert image button instead of copy and paste. Copy and paste can add unwanted HTML attributes.

Set images to 100% width by default:

After you insert an image, select it and use the image toolbar to set the width to 100%

For a global solution, add this CSS to your help center theme:

.article-body img {
width: 100%;
height: auto;
}

If images look distorted in notification emails:

Remove width and height HTML attributes from the tag

Use CSS to set the size, but some email clients strip CSS attributes

For pasted images, make sure the editor removes the width and height HTML attributes and uses CSS for size

Figure and aspect ratio styles removed with inserted images after a line break with ordered or unordered lists

Figure and aspect ratio styles disappear with images inserted after a line break with numbered and bulleted lists.

Use the Break Text feature from the image toolbar:

Insert a numbered or bulleted list

Add a break

Insert an image

Click on the image so the image toolbar appears

Click Break Text from the image toolbar

An extra line appears that you can delete

The workaround will add a instead of a .

Additional tips and fixes

If you're part of an Early Access Program (EAP), report the specific articles and grant account access for investigation

If you do not manage your help center theme, contact your theme admin or developer to request CSS changes

Test changes in a test environment before you apply them live

Clear your browser cache after you make CSS or theme changes to see the latest updates

For large-scale migrations:

Use browser developer tools to find problem tables and speed up the review process

Make manual adjustments in each affected article. There is no bulk migration or fix tool.

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.

Troubleshoot issues with videos

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.

To make embedded videos display correctly:

Turn on the Display unsafe content setting in your help center admin settings

This setting allows iframes and scripts to render in articles

If you have security concerns, consult your IT or security team before you turn on this setting because it has security implications

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.

You can insert an embedded video in two ways:

Click Insert into article > Embed in the toolbar

Paste an iframe embed code directly into the article source code

If your articles used non-iframe embeds, update them to use iframe-based embed codes from your video provider

If you already used iframes, turn on Display unsafe content so they render without updating each article

Adjust video size

The new article editor might set embedded videos to 100% width by default. To change the size, use CSS, not HTML width attributes:

.article-body iframe {
width: 50% !important;
}

Attention: Do not edit video width directly in the HTML editor. The new article editor may overwrite the change.

If videos appear as small thumbnails or do not display as expected:

Confirm that Display unsafe content is turned on

Make sure you use an iframe-based embed code

If the issue persists, report it with your embed code details and screenshots to your support contact or product manager