0

I'd like to be able to add classes to oembed videos on the fly in the post editor. This way I could have some videos act like images and alignleft or alignright and have text wrap around them, while the default behavior would be to set the video full width of the containing element and act responsively on resize. I already have that default behavior working via this function and some CSS:

// remove dimensions from oEmbed videos & wrap in figure
add_filter( 'embed_oembed_html', 'tdd_oembed_filter', 10, 4 ) ; 
function tdd_oembed_filter($html, $url, $attr, $post_ID) {
    $return = '<figure class="video-container">'.$html.'</figure>';
    return $return;
}

However I can't find a filter that would allow me to add a 'class' field to the "Insert from URL" media panel in the post editor - and even if I could I don't know where that class info would be stored as the editor itself holds only the video URL in plaintext.

Is this just something that can't be done without asking users to use a shortcode or custom fields, instead of the native oEmbed functionality? I'm guessing a shortcode is the fastest/easiest way but figured I'd check first to see if there's a more elegant, WordPress-native way to accomplish this. Thanks!

0

One idea for the shortcode version, would be to add the custom class via the the native [embed] shortcode:

[embed src="..." class="myclass"]

then you could add it to your custom wrapper with:

add_filter( 'embed_oembed_html', function ( $html, $url, $attr, $post_ID) {
    return sprintf( 
        '<figure class="video-container %s">%s</figure>', 
        isset( $attr['class'] ) ? esc_attr( $attr['class'] ) : '', 
        $html 
    );
}, 10, 4 );

Then you could e.g. add your own TinyMCE button with a custom form to generate this shortcode?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.