Blog, Broker Video Marketing, PHP, WordPress, WordPress Plugins, WordPress Shortcode

Embed VideoPress Videos in WordPress With Shortcode

On the 1st of July in 2015, WordPress announced a complete overhaul of VideoPress . VideoPress is a commercial product offered as an upsell to the WordPress.com , and Jetpack (WordPress.org) self hosted service. Built on top of the Open Source Media Framework its behaviour is controlled entirely by JavaScript, HTML and CSS, meaning that theming and customization options can be built upon the very malleable slate.

The player is one of my personal favorites and I await eagerly for the guys at WordPress to either make it commercially available as a self-hosted player, or open it up to the Open Source community - as they've already done with certain components .

This article will provide you with shortcode that will render a VideoPress video in your WordPress website (with optional meta data). Player options such as looping, autoplay, and the offset start time are all available as shortcode attributes. The player itself has a share button that launches a blind that offers embed code, download links and a permalink.

A PHP version is available for download. Requires Simple Cache.

The Result

Shortcode of [videopress v="https://videopress.com/v/iQnkO4EL"] (a video that demonstrates the features of the player) will render as follows.

VideoPress Share (21s). Posted: 1st July 2015
Share or embed VideoPress videos with custom settings like autoplay and loop.

By default the video will display the video title, length, and description - with the description silenced by the attribute of meta="0". To render a video without the description, and and starting at the 80 second mark, we'll use the shortcode of [videopress v="https://videopress.com/v/kUJmAcSf" meta="0" offset="80"] (attributes are discussed below).

Shortcode Attributes

The following shortcode attributes are available.

v is the full video URL or just the video ID.

width

The width refers to the default video width. Ensure you hardcode it to a suitable width that suits your own WordPress post container.

height

The height is the height of the video container. The video will automatically scale based on your width. You should only define it if the default video doesn't scale correctly.

loop

If you would like your video to loop, use loop="1". False by default.

autoplay

If you would like your video to autoplay on page load, use autoplay="1". False by default.

offset

If you would like to offset the start time of your video, use offset="300" - where the value is the number of seconds. In this case, 5 minutes.

meta

The meta is the small container under your video with video data. Use meta="0" to remove it. We cache the result as a transient for occasions when the video title or description changes.

The Shortcode Function

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 VideoPress Videos in WordPress with Shortcode

http://www.beliefmedia.com/wordpress-videopress

function beliefmedia_videopress($atts) {

$atts = shortcode_atts(array(

'v' => '', /* Video URL or ID */

'width' => '560',

'height' => false,

'loop' => 0,

'autoplay' => 0,

'offset' => '0',

'meta' => 1,

), $atts);

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

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

$chunks = explode('/', $atts['v']);

$atts['v'] = end($chunks);

}

/* If no height defined... */

if ($atts['height'] === false) $atts['height'] = round($atts['width'] / 1.784);

/* Build result */

$v = 'https://videopress.com/embed/' . $atts['v'] . '?at=' . $atts['offset'];

if ($atts['loop']) $v .= '&loop=1';

if ($atts['autoplay']) $v .= '&autoPlay=1';

$return .= '<div style="max-width: ' . $atts['width'] . 'px; margin: 0px auto;"><iframe width="' . $atts['width'] . '" height="' . $atts['height'] . '" src="' . $v . '" frameborder="0" allowfullscreen></iframe></div>';

if ($atts['meta'] != 0) $return .= beliefmedia_videopress_meta($atts['v'], $atts['width']);

$return .= '<script src="https://videopress.com/videopress-iframe.js"></script>';

return $return;

}

add_shortcode('videopress', 'beliefmedia_videopress');

<?php

Get VideoPress Meta Data & Cache

Embed VideoPress Videos in WordPress with Shortcode

http://www.beliefmedia.com/wordpress-videopress

function beliefmedia_videopress_meta($video, $width, $cache = '3600 * 24 * 7') {

$transient = 'bmvp_' . md5($video . $cache);

$cached = get_transient($transient);

if ($cached !== false) {

$return = $cached;

} else {

$data = file_get_contents('https://public-api.wordpress.com/rest/v1.1/videos/' . $video);

if ($data !== false) $data = json_decode($data, true);

/* If JSON */

if ($data !== false) {

$return = '<div style="max-width: ' . $width . 'px; margin: 0px auto; padding: 2px; 2px; 15px; 2px; font-size: 0.9em;"><span style="font-weight: bold;">' . $data['title'] . '</span> (' . ltrim(gmdate('H:i:s', ($data['duration'] / 1000) ), '00:') . 's). Posted: ' . date('jS F Y', strtotime($data['upload_date']));

if ($data['description'] != '') $return .= '' . $data['description'];

$return .= '</div>';

set_transient($transient, $return, $cache);

} else {

$return = (boolean) false;

}

return $return;

}

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

Additional information can be extracted from the JSON result and included to style the meta box to your liking.
WP's embedded JavaScript will scale the video container in a responsive way without any additional CSS.
The video duration format can be altered as described here.

Download

Title: Embed VideoPress Videos (WP Plugin)
Description: Embeds a VideoPress video (and optional meta data) in your website with shortcode.
Download • Version 0.2, 1.9K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (1.2K) PHP Code & Snippets, (1.3K)

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