How to allow <video> html5 tag in WordPress

3 Views

Currently I am running a WordPress MU blog using the Unfiltered MU plugin. However, when I try to insert an HTML5 tag, it gets stripped away. I believe it may be the WYSIWYG editor cleaning the code. Where can I change settings to allow ?

Thanks

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. Just FYI… WordPress 3.2 includes an updated TinyMCE which allows HTML5 tags. It’s still under development but is fairly stable if you want to take the risk of running it now.

    The alternative is to write any posts requiring the tag with the visual editor turned off. As long as you don’t turn the editor on again on that same post the tags will stay there. Just turn the editor on once you have navigated away from that post in admin.

  3. This is totally untested, but I’m pretty sure this shortcode plugin I just wrote for you is going to work. You might need to tweak it. Please let me know either way.

    Shortcode: [videotag option1="value1" option2="value2"]

    Example: [videotag src="http://path.com/to/video.mp4" height="400" width="300" controls="controls"]

    <?php
/*
Plugin Name: Add 'videotag' shortcode
Plugin URI: http://wordpress.stackexchange.com/questions/12059/how-to-allow-video-html5-tag-in-wordpress
Description: Adds support for <video> HTML tag described here: http://diveintohtml5.org/video.html
Supports the attributes described here: http://www.w3schools.com/html5/tag_video.asp (warning: http://w3fools.com/)
Author: http://wordpress.stackexchange.com/users/1860/
*/

function build_video_tag_html_embed($atts, $content = null) {
    extract( shortcode_atts( array('audio'=>'',
                                 'autoplay'=>'',
                                 'controls'=>'',
                                 'height'=>'',
                                 'loop'=>'',
                                 'poster'=>'',
                                 'preload'=>'',
                                 'src'=>'',
                                 'text'=>'This browser doesn't support the <pre><video></pre> tag.',
                                 'width'=>''), $atts));

    /* Sanitize some stuff */
    $text = sanitize_text_field($text);
    $width = intval($width);
    $height = intval($height);

    $html_to_return .= "<video";
    if( !empty($audio) ) {
        $html_to_return .= " audio='" . esc_attr($audio) . "'";
    } 
    if( !empty($autoplay) ) {
        $html_to_return .= " autoplay='" . esc_attr($autoplay) . "'";
    }
    if( !empty($controls) ) {
        $html_to_return .= " controls='" . esc_attr($controls) . "'";
    }
    if( !empty($height) ) {
        $html_to_return .= " height='" . esc_attr($height) . "'";
    }
    if( !empty($loop) ) {
        $html_to_return .= " loop='" . esc_attr($loop) . "'";
    }
    if( !empty($poster) ) {
        $html_to_return .= " poster='" . esc_attr($poster) . "'";
    }
    if( !empty($preload) ) {
        $html_to_return .= " preload='" . esc_attr($preload) . "'";
    }
    if( !empty($src) ) {
        $html_to_return .= " src='" . esc_attr($src) . "'";
    }
    if( !empty($width) ) {
        $html_to_return .= " width='" . esc_attr($width) . "'";
    }
    $html_to_return .= ">{$text}</video>";
}

add_shortcode('videotag', 'build_video_tag_html_embed');
?>

    Interesting question. This would be a great patch, maybe the first I’ll submit.