Use wordpress built in mediaelement.js to embed brandless youtube videos using a function

0 Views

I am trying to find a function that uses mediaelement.js player to embed relatively brandless youtube videos.

As mediaelement.js is built into WordPress surely I can replace the youtube branded iframe embed code given back from oembed with a chromeless mediaelement api embed code.

Read More

I have 2000 videos on my site and going into every video to change the youtube embed is sadly not an option. This must be possible with a function!

In my tests the mediaelement api seems to suck on ipad so I have used an if statement to exclude ios devices. Using a little Jquery this code works well in a wordpress php file. 

<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) 
{
echo '<iframe width="560" height="315" src="//www.youtube.com/embed/TKgDzpc3lZ8?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>';
}
else
{
echo '<video controls="controls" id="youtube1">
<source type="video/youtube" src="//www.youtube.com/embed/TKgDzpc3lZ8"/>
</video>';
}
?>

So with that working as it should the goal now is do this with a function and str_replace the youtube embed before it is sent to the browser. This is what I have so far and I am well aware I am punching above my weight: 

function youtubeme($youtubeme) {
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) 
{

}
else
{
 return (str_replace('<iframe width="750" height="422"', '<video controls="controls" id="youtube1"><source type="video/youtube" ', $youtubeme));
 return (str_replace('?feature=oembed&amp;autoplay=1" frameborder="0" allowfullscreen=""></iframe>', '"/></video>', $youtubeme));

}}

add_action('wp_embed', 'youtubeme');

Any help would be very much appreciated as I am still learning and it has been several hours of pain getting this far.

//////EDIT//////

This is the Jquery I used. 

jQuery(document).ready(function($) {
   $('#youtube1').mediaelementplayer({
   alwaysShowControls: true,
   // force iPad's native controls
   iPadUseNativeControls: true,
   // force iPhone's native controls
   iPhoneUseNativeControls: true, 
   // force Android's native controls
   AndroidUseNativeControls: true,
})});
Post Views: 0

Related posts

Leave a Reply

1 comment

  1. You were very near, basically just missing the correct filter hook. Note that:

    • the $html parameter is the <iframe... HTML.

    • $url contains the URL being parsed (youtu.be/... or youtube.com/...).

    • $attr is an object with height and width.

    • the $html string replace should be optimized to work with any width/height; in this example I’m using the values generated by one theme, but it varies from one to another.

    • the <video id="ID"> should be optimized to work with any number of embeds.

    • the play icon is showing two versions: YouTube’s and MediaElement’s

    • I didn’t manage to instantiate MediaElement with $('#youtube1').mediaelementplayer() and used new MediaElementPlayer("#youtube1").

    add_filter( 'embed_oembed_html', 'oembed_so_26585894', 10, 4 );

function oembed_so_26585894( $html, $url, $attr, $post_ID )
{
    $provider = parse_url( $url ); 

    if( !in_array( $provider['host'], array('youtu.be','youtube.com') ) )
        return $html;

    if(
        strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') 
        || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') 
        || strstr($_SERVER['HTTP_USER_AGENT'],'iPad')
    )
        return $html;

    $html = str_replace( '<iframe width="584" height="438"', '<video controls="controls" id="youtube1"><source type="video/youtube" width="640" height="360" ', $html );
    $html = str_replace( '?feature=oembed" frameborder="0" allowfullscreen></iframe>', '"/></video>', $html );
    $html .= '<script>jQuery(document).ready(function($) { var player = new MediaElementPlayer("#youtube1"); });</script>';
    return $html;
}

    And the following to enqueue the needed scripts/stylesheet:

    add_action( 'wp_enqueue_scripts', function(){
    wp_enqueue_style( 'wp-mediaelement' );
    wp_enqueue_script( 'wp-mediaelement', false, array('jquery'), false, true );
});