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

Question

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;
            }
        }
    }
});

});

Answer 1

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 to manipulate Redactor's output.