Blog, Vimeo, WordPress, WordPress Plugins, WordPress Shortcode

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

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.

<?php

Embed Responsive Vimeo Videos in WordPress with Shortcode

http://www.beliefmedia.com/vimeo-video-wordpress

function beliefmedia_embed_vimeo_video($atts, $content = null) {

extract(shortcode_atts(array(

'v' => '',

'width' => '590',

'frameborder' => '0'

), $atts));

$style = '<style scoped>

.embed-container {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

max-width: ' . $width . 'px;

margin: 0px auto;

}

.embed-container iframe {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

padding-bottom: 0;

}

</style>';

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

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

$regex = '/(https?:\/\/)?(www\.)?(player\.)?vimeo\.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/';

preg_match($regex,$v,$m);

$v = $m[5];

}

/* Build embed code */

$return = '<p><div>' . $style;

$return .= '<div class="embed-container"><iframe src="https://player.vimeo.com/video/' . $v . '" frameborder="' . $frameborder . '" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>';

$return .= '</div></p>';

return $return;

}

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 complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.