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
v
width
height
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/* 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
Shortt URL for this post: http://shor.tt/2nUB
