Home Embed MetaCafe Videos in a WordPress Post or Page with Shortcode

Embed MetaCafe Videos in a WordPress Post or Page with Shortcode

September 27, 2017

Metacafe is a video-sharing website that specialises in short-form video entertainment. Founded in July 2003 in Israel, Metacafe now ranks around the 1200 mark on Alexa , and the site maintains a significant presence in the video sharing space. This article will show you how to include responsive Metacafe videos on your WordPress post or page with shortcode.

The Result

Using the shortcode of [metacafe v="11555883"] (using the video ID obtained from each video URL) or [metacafe v="http://www.metacafe.com/watch/11555883/daddy-scares-her-little-girl-with-shadow-monster/"] (the full video URL), the following video will be returned:

As with other shortcode we’ve provided, it’s generally best practice to use the video ID rather than the full URL.

Shortcode Parameters

The video ID or full video URL.

width

The numeric width of your video in pixels (generally just under the total width of your post container).

height

The height of your video will automatically be determined based on the width. However, if required, it can be defined.

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

/*
	Embed MetaCafe Videos in a WordPress Post or Page with Shortcode
	http://www.beliefmedia.com/code/metacafe-wordpress-shortcode
*/


function beliefmedia_embed_metacafe($atts) {

  $atts = shortcode_atts(array(
    'v'  => '',
    'width'  => '540',
    'height' => false
  ), $atts);

  /* Scale the height if not defined */
  if ($atts['height'] === false) $atts['height'] = round(abs($atts['width'])/1.777);

  /* If a URL we'll snatch the ID. Best to provide just ID */
  if (strripos($atts['v'], 'http') !== false) {
    $path = parse_url($atts['v'], PHP_URL_PATH);
    $pieces = explode('/', $path);
    $atts['v'] = $pieces[2];
  }

  $style = '<style scoped>
    .embed-container { 
      position: relative;
      padding-bottom: ' . round(($atts['height'] / $atts['width']) * 100) . '%;
      height: 0; 
      overflow: hidden;
      max-width: ' . $atts['width'] . 'px;
      margin: 0px auto;
    } 

    .embed-container iframe { 
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      padding-bottom: 0;
      overflow: hidden;
   }</style>';

  $iframe = '<iframe width="' .  $atts['width'] . '" height="' . $atts['height'] . '" src="http://www.metacafe.com/embed/' . $atts['v'] . '/" frameborder="0" scrolling="no" allowfullscreen></iframe>';

  /* Return responsive iframe */
 return '<p><div style="max-width: ' . $atts['width'] . 'px; margin: 0px auto;">' . $style . '<div class="embed-container">' . $iframe . '</div></div></p>';
}
add_shortcode('metacafe', 'beliefmedia_embed_metacafe');

Embed MetaCafe Videos in a WordPress Post or Page with Shortcode

http://www.beliefmedia.com/code/metacafe-wordpress-shortcode

function beliefmedia_embed_metacafe($atts) {

$atts = shortcode_atts(array(

'v' => '',

'width' => '540',

'height' => false

), $atts);

/* Scale the height if not defined */

if ($atts['height'] === false) $atts['height'] = round(abs($atts['width'])/1.777);

/* If a URL we'll snatch the ID. Best to provide just ID */

if (strripos($atts['v'], 'http') !== false) {

$path = parse_url($atts['v'], PHP_URL_PATH);

$pieces = explode('/', $path);

$atts['v'] = $pieces[2];

}

$style = '<style scoped>

.embed-container {

position: relative;

padding-bottom: ' . round(($atts['height'] / $atts['width']) * 100) . '%;

height: 0;

overflow: hidden;

max-width: ' . $atts['width'] . 'px;

margin: 0px auto;

}

.embed-container iframe {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

padding-bottom: 0;

overflow: hidden;

}</style>';

$iframe = '<iframe width="' . $atts['width'] . '" height="' . $atts['height'] . '" src="http://www.metacafe.com/embed/' . $atts['v'] . '/" frameborder="0" scrolling="no" allowfullscreen></iframe>';

/* Return responsive iframe */

return '<p><div style="max-width: ' . $atts['width'] . 'px; margin: 0px auto;">' . $style . '<div class="embed-container">' . $iframe . '</div></div></p>';

}

add_shortcode('metacafe', 'beliefmedia_embed_metacafe');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Considerations

Metacafe has a habit of providing a vertical scrollbar on each video that it renders via an iframe. For that reason, I’ve added scrolling="no" to the final code avoid them. The video won’t be affected.
If you can embed the same video from YouTube or any other reliable source, it’s best to do so to avoid the annoying auto-start preroll adverts.

Download

Title: Embed MetaCafe Videos in WordPress with Shortcode
Description: Embed responsive MetaCafe videos in a WordPress Post or Page with Shortcode.
Download: Shortcode (V0.2) | Plugin Page

Short URL for this post: http://shor.tt/2nUB