Embed Vevo Videos in a WordPress Post or Page with Shortcode

Vevo is a video hosting service owned and operated by a joint venture of Universal Music Group (UMG), Google, Sony Music Entertainment (SME) and Abu Dhabi Media. The service provides music videos from two of the "big three" major record labels: UMG and SME. This article will show you how to embed the (responsive) video content from Vevo into your WordPress website with shortcode.

The Result

Using the shortcode of [vevo v="http://www.vevo.com/watch/ariana-grande/Problem/USUV71400762"] (the full page URL) or simply [vevo v="USUV71400762"] (the video ID), we'll return the video below.

~~Removed~~

The video is responsive and will scale on mobile devices.

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.

<?php

Embed Vevo Videos in a WordPress Post or Page with Shortcode

http://www.beliefmedia.com/code/wp-snippets/embed-vevo-wordpress

http://en.wikipedia.org/wiki/International_Standard_Recording_Code (ID's) CC-XXX-YY-NNNNN

function beliefmedia_embed_vevo($atts) {

$atts = shortcode_atts(array(

'v' => '',

'width' => '570',

'height' => 0,

'ap' => '0'

), $atts);

/* Scale the height if not defined */

if (!$atts['height']) $atts['height'] = round($atts['width'] / 1.7777);

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

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

$regex = '/([A-Z]{2}[A-Z0-9]{3}\d{2}\d{5})/';

preg_match($regex, $atts['v'], $m);

$atts['v'] = $m[1];

}

$style = '

.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 = '<iframe width="' . rtrim($atts['width'], 'px') . '" height="' . rtrim($atts['height'], 'px') . '" src="https://embed.vevo.com?isrc=' . $atts['v'];

$iframe .= ($atts['ap']) ? '&autoplay=true"' : '"';

$iframe .= ' frameborder="0" allowfullscreen scrolling="no"></iframe>';

/* Return responsive iframe */

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

</div>';

}

add_shortcode('vevo', 'beliefmedia_embed_vevo');

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

It's always best to use the video ID rather than the URL, particularly - as is the case with Vevo - where the ID complies with a consistent standard .
The video container height is automatically determined. If the height doesn't work for you, add the height into your shortcode.
If you would like the video to autoplay when the video loads, use ap="1" in your shortcode.

The Result

WordPress Shortcode

Considerations

Like this article?

Martin Khoury

Leave a comment