embed the_content

Question

Im trying to wrap video urls and embed code in a classed div so that I can style it. The vid code is being pulled from the custom meta value I've setup for the video post type. Nothing I've been able to find via the forum or google seems to quite answer my question.

Use case: The user either enters a youtube url into the video meta field, or they plunk in the entire embed code. Either way I need to wrap the output in some classed divs (fitvid).

Im new with WP and was hoping someone could explain: Why the urls Im passing to the_content in the code below, not being phrased by the [embed] shortcode? And what do I have to do to get it to?

From what I can tell, my options are either get [embed] to recognise the urls as video and do their magic -- or try to do the detection myself (which is a bit beyond my reach ATM :) ).

Here is what I have so far:

<?    
     $mykey_values = get_post_custom_values('_format_video_embed');
         foreach ( $mykey_values as $key => $value ) {    
            if (!empty($value)) {
            // I can get one or the other to work but not both
            //$var = apply_filters('the_content', "[embed]" . $value . "[/embed]"); 
            //this will only return the url - but why?
            $var = apply_filters('the_content', $value );
            }
            echo "<div id='fitvid'>$var</div>";   
        }  ?>       
      <?php the_content();  ?>  

Hey - and thanks in advance for your experience.

Answer 1

So I've never really found out why oembed urls added via apply_filters('the_content', $output), are not processed while embed shortcodes are. Im still hopeful someone might shed some light on that.

I really wanted to use Alex King's post type formats UI which is why I didn't follow David's example.

I ended up detecting the input using strpos and substr because that seemed the most direct. If anyone knows a better way of doing it, or sees some flaw in my approach please chime in!

<?  // deal with embeds from the _format_video_embed meta meta feild

// allow us to strpos an array
//http://www.webmastertalkforums.com/php-functions/17117-php-strpos-using-array-values-search-needle.html#ixzz1rYKDjUNK 
function strpos_arr($haystack, $needle) { 
    if(!is_array($needle)) $needle = array($needle); 
    foreach($needle as $what) { 
        if(($pos = strpos($haystack, $what))!==false) return $pos; 
    } 
    return false; 
}       
$embedCheck = array("<embed", "<video", "<ifram");// only checking against the first 6

$mykey_values = get_post_custom_values('_format_video_embed');
$content_oembed = '';
     foreach ( $mykey_values as $key => $value ) {    
    if (!empty($value)) {
        $firstCar = substr($value, 0, 6); // get the first 6 char 

        if ( strpos($firstCar, "http:/" ) !== false || strpos($firstCar, "https:" ) !== false ){  
             // if its a http(s), send it to wp_oembed to see if the link is oembed enabled, and if not - output a link
            (wp_oembed_get($value) !==false ? $output = '<div class="oembed" style="width:100%; overflow:hidden;">' . wp_oembed_get($value) . '</div>' : $output =  '<a href="' . $value . '" target="_blank"><button class="btn"><i class="i icon-film"></i>Video link: ' . $value . '</button></a><hr>' );
        }       
        else if (strpos_arr($firstCar, $embedCheck ) !== false ){ //if it comes back as an embed, video, or iframe return the full string to the content                 
            //$output = '<div class="oembed" style="max-width="500px"><p>something funny</p>' . $value . '</div>'; // we're wrapping it so we can style it with fitvid
            $content_oembed = $value;                   
        }
        else if( current_user_can('publish_posts') ){// a little error for the editor
                $content_oembed = "<div class='alert alert-error'><strong>Whoops! That embed link or code has problems:</strong></br>";
                $content_oembed .= "URLS should begin with http:// or https:// <br/>";
                $content_oembed .= "Embed code should be wrapped in either &lt;embed&gt;&lt;/embed&gt; &lt;video&gt;&lt;/video&gt; or &lt;iframe&gt;&lt;/iframe&gt; elements.";
                $content_oembed .= "<p class='well'>" . $value . "</p></div>";
            }
        }                       
};
//echo apply_filters('the_content', $content_oembed);   
?>

Answer 2

I wrote a very quick and simple mark-up that works -- I know WordPress has a built in oEmbed system, this doesn't follow it - at all. However, I'd be a fool not to share it if you can adapt a solution that works for me at least.

Sampled Code Notes: For this project I had to create a custom post type for videos so that my client could easily go in and add video posts with the Video ID from YouTube. These videos were of Houses their company had listed, and then professionally had videos shot. Their current workflow worked, and the rate of developing a video was about 5-6 weeks per, and maybe 13-15 videos per year.

When I had to start this project it was my understanding then that the oEmbed wasn't really needed for my uses, I may now in retrospect regret the decision on the argument of syntax, elegance, etc -- albeit, it's been rigid enough for this long without fail.

With that said, I also used a Custom Metabox Class to use get_post_meta for the ID of the video, I didn't ever build in Validation or Sanitizing of the input in the case that a video wasn't entered with the expectation of someone posting to a custom post type of videos that they would in fact not skip this very simple step. I'm a little over-confident at times, therefore you might want to add in some of that stuff per your needs

Getting Started: Create a `page-your-custom-post-type.php and put in the following:

<?php
/*
 Template Name: Your Template Name
 */

get_header(); 

function customBlogFeed() {

// The Query 
$the_query = new WP_Query( array ( 'post_type' => 'your-custom-post-type', 'posts_per_page' => '6' ) ); 

It is important that 'post_type' => 'your-custom-post-type' is linked to your page-your-custom-post-type.php page, otherwise it won't know what to output. Additionally, you can add more parameters to the WP_Query array() WP_Query WordPress Codex Page.

// The Loop 
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
  <div class="port">
  <h2 class="smaller">
    <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
      <?php the_title(); ?>
    </a>
    <span style="font-size: 11px;">
      Posted on: <?php the_time(get_option('date_format')); ?> by: <?php echo get_the_author(); ?>
    </span>
   </h2>

Linking to your custom post type by default WordPress will feed this through single.php if it exists and fallback to index.php if single.php doesn't exist. However, If you create a single-your-custom-post-type.php WordPress will use that as your page-template for your custom post type.

        <object width="288" height="176">
          <param name="movie" value="http://www.youtube.com/v/<?php $meta = get_post_meta(get_the_ID(), 'sb_metabox_video_url', true); if (strlen($meta) > 1 ) { echo $meta; } ?>?version=3&rel=0&modestbranding=1&autoplay=0&controls=0"></param>
          <param name="allowFullScreen" value="true"></param>
          <param name="allowscriptaccess" value="always"></param>
             <embed src="http://www.youtube.com/v/<?php $meta = get_post_meta(get_the_ID(), 'sb_metabox_video_url', true); if (strlen($meta) > 1 ) { echo $meta; } ?>?version=3&rel=0&modestbranding=1&autoplay=0&controls=0" type="application/x-shockwave-flash" width="288" height="176" allowscriptaccess="always" allowfullscreen="true"></embed>
        </object>

oEmbed: I'm also passing these parameters to YouTube:

?version=3&rel=0&modestbranding=1&autoplay=0&controls=0

Which tell it how to style the Video Player it renders.

      <?php the_excerpt(); ?>
      <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Continue reading %s', 'twentyten' )); ?>" rel="bookmark"><img src="<?php bloginfo('template_directory') ?>/images/button_more.gif" alt="<?php printf( esc_attr__( 'Continue reading %s', 'twentyten' )); ?>" border="0" class="none" style="height: 28px!important; width:55px!important;" /></a>
  </div>

<?php endwhile;

// Reset Post Data
wp_reset_postdata();
}

?>

Closing it all up with your wp_reset_postdata(); and you've got a page that will use WP_Query to loop through 6 Posts with the_title() the_excerpt and an oEmbed Video.

Cheers!

Answer 3

This question is pretty old, but here's what I came up with for Wordpress 4.0+

Wordpress oembed wants to store the oembed urls on their own line in the database with no other markup. That's the only way it will work. Try pasting this into the "Text" tab of a page or post:

<h2>This Video Won't Work:</p>
<div>https://www.youtube.com/watch?v=pWxnGf7isqc</div>
<h2>This Video Will Work</h2>

https://www.youtube.com/watch?v=pWxnGf7isqc

Now click back and forth between visual and text editing mode. This is where the issue comes from.

If you want make your video width responsive, try chris coyier's method and you won't need to wrap the iframe.