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

Embed Responsive Vimeo Videos in WordPress with Shortcode

Vimeo is a social video website not much unlike YouTube. Because of its premium subscriptions, it permits videos to be broadcast without advertisements making it popular among certain film makers. Those that use it argue that its back end functionality make it a more sensible choice to any other video streaming platform - including YouTube.

The name Vimeo was created as a play on the words video and me. Vimeo is also an anagram of the word movie.

This post is the first of a few that deals with Vimeo. This one is the most basic since all it does is show how to render a Vimeo video on your WordPress website with shortcode... and nothing else. In posts to follow we'll play around with the API and provide more meaningful functionality.

The Result

Using the shortcode of [vimeo v="http://player.vimeo.com/video/82413431"] or [vimeo v="82413431"] (preferred), the following video will show on your WordPress post or page.

Shortcode Attributes

v

The v is the video URL or video ID. While virtually any Vimeo URL is generally permitted, the ID is preferred so global modifications can easily be made in the future.

width

I've set my default width to 590 (pixels) although you'll want to change this to best fit your post container.

Usage

Example usage is as follows: [vimeo v="67019023"]. You may optionally alter the width of the container with [vimeo v="67019023" width="860"] (where 860 is your new pixel width).

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. You may optionally download and install our plugin from the bottom of of the page.

1
<?php 
2
/*
3
 Embed Responsive Vimeo Videos in WordPress with Shortcode
4
 http://www.beliefmedia.com/vimeo-video-wordpress
5
*/
6
 
7
function beliefmedia_embed_vimeo_video($atts, $content = null) {
8
 extract(shortcode_atts(array(
9
  'v'  => '',
10
  'width'  => '590',
11
  'frameborder' => '0'
12
), $atts));
13
 
14
$style = '<style scoped>
15
.embed-container {
16
  position: relative;
17
  padding-bottom: 56.25%;
18
  height: 0;
19
  overflow: hidden;
20
  max-width: ' . $width . 'px;
21
  margin: 0px auto;
22
}
23
 
24
.embed-container iframe {
25
  position: absolute;
26
  top: 0px;
27
  left: 0px;
28
  width: 100%;
29
  height: 100%;
30
  padding-bottom: 0;
31
}
32
</style>';
33
 
34
   /* If a URL we'll get the ID. Best to provide just ID */
35
   if (strripos($v,'http') !== false) {
36
     $regex = '/(https?:\/\/)?(www\.)?(player\.)?vimeo\.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/';
37
     preg_match($regex,$v,$m);
38
     $v = $m[5];
39
   }
40
 
41
  /* Build embed code */
42
  $return = '<p><div>' . $style;
43
  $return .= '<div class=&quot;embed-container&quot;><iframe src=&quot;https://player.vimeo.com/video/' . $v . '&quot; frameborder=&quot;' . $frameborder . '&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>';
44
  $return .= '</div></p>';
45
 
46
 return $return;
47
}
48
add_shortcode('vimeo', 'beliefmedia_embed_vimeo_video');

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.

Download


Title: Embed Responsive Vimeo Videos in WordPress (WP Plugin)
Description: Embed Responsive Vimeo Videos in WordPress with Shortcode.
  Download • Version 0.2, 1.7K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (891.0B)    

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  AUS Eastern Standard Time (Connecticut)

  Want to have a chat?
 

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

READY TO HAVE A CHAT? CALL US ANYTIME ON 1300 235 433