Background: EPiServer is the CMS for the Norwegian Government main site, and we use WordPress for more ad hoc sites.

Task: Based on the design guide for, add 23 video to WordPress.

23 video supports oembed, so adding it is easy


// replace NAME with your 23 video site name

and adding a video gave me this

which is not per the design guide.

Modifying the HTML

Please see inline comments. If something is unclear, ask.

 * Rewrite the oEmbed HTML
 * @param  string $output The returned oEmbed HTML
 * @param  object $data   A data object result from an oEmbed provider
 * @param  string $url    The URL of the content to be embedded.
 * @return string         The modified HTML
function nettv_embed_filter( $output, $data, $url ) {

     * We have two sites, one for video and one for live streaming, is this oEmbed one of those?
    if ( false !== strstr( $url,'' ) || false !== strstr( $url,'' ) ) {
        if ( false !== strstr( $url,'SITE01' ) ) {
            $video_host = '';
        } else {
            $video_host = '';

         * Video and Live have different URLs
        if (isset($data->photo_id)) {
            $photo_id = $data->photo_id;
            $nettv_url = "//%s/v.ihtml/player.html?source=share&photo_id=%s&autoPlay=0";
        } elseif (isset($data->live_id))  {
            $photo_id = $data->live_id;
            $nettv_url = "//%s/v.ihtml/player.html?live_id=%s&source=site&autoPlay=1";
        } else {
            //Something went wrong, return the URL to the video.
            return sprintf('<a href="%s">%s</a>', esc_url($output), esc_url($output));

         * Create the HTML. I use the <div class="webBroadcastBlock"></div><!--/webBroadcastBlock--> wrapper for my custom autop function.
         * @var string
        $output = sprintf('<div class="webBroadcastBlock"><h2><span class="media-banner"><span class="media-banner-nett-tv">Nett-tv</span><span class="media-banner-archived"></span></span>%1$s</h2><a href="%2$s" data-lightbox-opener="nett-tv" data-lightbox-title="%3$s" data-lightbox-closetxt="%4$s" data-lightbox-labeltxt="Nett-tv" data-lightbox-label-status=""><img src="%5$s" alt="%6$s" /><p>%7$s</p></a></div><!--/webBroadcastBlock-->',
            sprintf($nettv_url,$video_host, $photo_id),
    return $output;



wpautop is a pain and it messed up my modified oembed HTML code. I "solved" (if you have a better soultion, please tell me) the problem by writing a custom wpautop that autopees everything except my code.

First, disable the default wpautop

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize')

Then add the custom wpautop

function nettv_no_autop($content) {
    $new_content = '';

    $pattern_full = '{(<div class="webBroadcastBlock">.*?</div><!--/webBroadcastBlock-->)}is';
    $pattern_contents = '{(<div class="webBroadcastBlock">(.*?)</div><!--/webBroadcastBlock-->)}is';
    $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

    foreach ($pieces as $piece) {
    	 * If the pattern matches, it's my custom HTML code. Return the HTML without passing it throug wpautop.
        if (preg_match($pattern_contents, $piece, $matches)) {
            $new_content .= $matches[1];
        } else {
            $new_content .= wptexturize(wpautop($piece));

    return $new_content;
add_filter('the_content', 'nettv_no_autop', 99);



(click the image to see an animation)