<p>It's probably not the answer you want to hear, but the best way to avoid these kind of problems is to modernise your content model so that videos are stored in their own dedicated section, and then allow authors to create relationships to those video entries via a dedicated 'video' block type in a content matrix. Similar for images really (though it is arguably still important to allow for inline images in Redactor such as for images in the middle of sentences). If you want to prevent Redactor from wrapping images with a figure element you can specify <code>imageFigure: false</code> in your Redactor config json files.</p>
<p>If you can't update your content model easily, then as a last resort you might need to delve into the <a href="https://plugins.craftcms.com/retcon" rel="nofollow noreferrer">Retcon plugin</a> to manipulate Redactor's output.</p>

CC BY-SA 4.0
2021-02-18T14:09:58.687Z
Thanks James, Retcon might be a solution, I need to have a play with it. I have used matrix for a content field before to allow users to insert images and video into the flow of the text. The feedback I got was that it was too complicated for less experienced users. They just didn't get the way that they could control the format and presentation of their content. They just wanted to copy/paste the whole thing from a Word document and then just insert the images and YouTube links afterwards. Maybe I allow image inserts in redactor but have a separate field for YouTube embeds.
Paul Frost
CC BY-SA 4.0
2021-02-18T14:30:47.883Z
I just tried the imageFigure: false in my config file, but it only works if you leave the caption box empty.
Paul Frost
CC BY-SA 4.0
2021-02-18T12:49:38.543Z
2021-02-18T12:49:38.543Z
James Smith
<p>When video or images are embedded redactor wraps both the iframe and img tags in a .
I've been using the following css to style the iframe to maintain the ratio responsively:</p>
<pre><code>figure {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin: .5em 0 1em 0;
}
figure iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
</code></pre>
<p>But this screws up the embedded images as I don't want the ratio stuff to apply to images.
Is there a simple way to be able differentiate the two?</p>
<p>I used to add a DIV class to a specific embed in CKEditor with a custom config file containing:</p>
<pre><code>CKEDITOR.on( 'instanceReady', function( ev ) {
ev.editor.dataProcessor.htmlFilter.addRules({
    elements: {
        $: function (element) {
            // Add embed_media class name to embedded media
            if (element.name === 'div' &amp;&amp; element.children[0].name === 'iframe') {
                element.attributes.class = 'embed_media';
                return element;
            }
        }
    }
});
</code></pre>
<p>});</p>

<redactor>
Redactor adds <figure> to both image and video embeds, how to style differently
# Redactor adds <figure> to both image and video embeds, how to style differently

(Asked by: username_0 on 2021-02-17)

When video or images are embedded redactor wraps both the iframe and img tags in a .
I've been using the following css to style the iframe to maintain the ratio responsively:
figure {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin: .5em 0 1em 0;
}
figure iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

But this screws up the embedded images as I don't want the ratio stuff to apply to images.
Is there a simple way to be able differentiate the two?
I used to add a DIV class to a specific embed in CKEditor with a custom config file containing:
CKEDITOR.on( 'instanceReady', function( ev ) {
ev.editor.dataProcessor.htmlFilter.addRules({
    elements: {
        $: function (element) {
            // Add embed_media class name to embedded media
            if (element.name === 'div' && element.children[0].name === 'iframe') {
                element.attributes.class = 'embed_media';
                return element;
            }
        }
    }
});

});

**Tags:** redactor


---

## 1 answers

### Answer by username_1 on 2021-02-18. Score: 0 | Accepted answer

It's probably not the answer you want to hear, but the best way to avoid these kind of problems is to modernise your content model so that videos are stored in their own dedicated section, and then allow authors to create relationships to those video entries via a dedicated 'video' block type in a content matrix. Similar for images really (though it is arguably still important to allow for inline images in Redactor such as for images in the middle of sentences). If you want to prevent Redactor from wrapping images with a figure element you can specify `imageFigure: false` in your Redactor config json files.

If you can't update your content model easily, then as a last resort you might need to delve into the [Retcon plugin](https://plugins.craftcms.com/retcon) to manipulate Redactor's output.

> **Comments:**
> **username_0**: Thanks James, Retcon might be a solution, I need to have a play with it. I have used matrix for a content field before to allow users to insert images and video into the flow of the text. The feedback I got was that it was too complicated for less experienced users. They just didn't get the way that they could control the format and presentation of their content. They just wanted to copy/paste the whole thing from a Word document and then just insert the images and YouTube links afterwards. Maybe I allow image inserts in redactor but have a separate field for YouTube embeds.  
> **username_0**: I just tried the imageFigure: false in my config file, but it only works if you leave the caption box empty.  

---

