Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggregation Enquires Welcome

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.

1
<?php 
2
/*
3
 Embed Vevo Videos in a WordPress Post or Page with Shortcode
4
 http://www.beliefmedia.com/code/wp-snippets/embed-vevo-wordpress
5
 http://en.wikipedia.org/wiki/International_Standard_Recording_Code (ID's) CC-XXX-YY-NNNNN
6
*/
7
 
8
function beliefmedia_embed_vevo($atts) {
9
 
10
  $atts = shortcode_atts(array(
11
    'v'  => '',
12
    'width'  => '570',
13
    'height' => 0,
14
    'ap' => '0'
15
  ), $atts);
16
 
17
  /* Scale the height if not defined */
18
  if (!$atts['height']) $atts['height'] = round($atts['width'] / 1.7777);
19
 
20
  /* If a URL we'll snatch the ID. Best to provide just ID */
21
  if (strripos($atts['v'], 'http') !== false) {
22
    $regex = '/([A-Z]{2}[A-Z0-9]{3}\d{2}\d{5})/';
23
    preg_match($regex, $atts['v'], $m);
24
    $atts['v'] = $m[1];
25
  }
26
 
27
   $style = '
28
<style scoped>
29
     .embed-container {
30
       position: relative;
31
       padding-bottom: ' . round(($atts['height'] / $atts['width']) * 100) . '%;
32
       height: 0;
33
       overflow: hidden;
34
       max-width: ' . $atts['width'] . 'px;
35
       margin: 0px auto;
36
     }
37
 
38
     .embed-container iframe {
39
       position: absolute;
40
       top: 0px;
41
       left: 0px;
42
       width: 100%;
43
       height: 100%;
44
       padding-bottom: 0;
45
       overflow: hidden;
46
     }
47
   </style>
48
 
49
';
50
 
51
  /* iframe */
52
  $iframe = '<iframe loading="lazy" width="' . rtrim($atts['width'], 'px') . '" height="' . rtrim($atts['height'], 'px') . '" src="https://embed.vevo.com?isrc=' . $atts['v'];
53
  $iframe .= ($atts['ap']) ? '&autoplay=true"' : '"';
54
  $iframe .= ' frameborder="0" allowfullscreen scrolling="no"></iframe>';
55
 
56
 /* Return responsive iframe */
57
 return '<div style="max-width: ' . rtrim($atts['width'], 'px') . 'px; margin: 0px auto;">' . $style . '<div class="embed-container">' . $iframe . '</div>
58
</div>';
59
}
60
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.

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment