RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts</strong | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
Example Interest Rates: Home Loan Variable: 5.69% (5.89%*) • Home Loan Fixed: 5.39% (6.59%*) • Fixed: 5.39% (6.59%*) • Variable: 5.69% (5.89%*) • Investment IO: 5.69% (6.48%*) • Investment PI: 5.39% (6.59%*)

Embed VideoPress Videos in WordPress With 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

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.

1
<?php 
2
/*
3
 Embed VideoPress Videos in WordPress with Shortcode
4
 http://www.beliefmedia.com/wordpress-videopress
5
*/
6
 
7
function beliefmedia_videopress($atts) {
8
 
9
  $atts = shortcode_atts(array(
10
    'v' => '', /* Video URL or ID */
11
    'width' => '560',
12
    'height' => false,
13
    'loop' => 0,
14
    'autoplay' => 0,
15
    'offset' => '0',
16
    'meta' => 1,
17
  ), $atts);
18
 
19
  /* If a URL we'll snatch the ID. Best to provide just ID */
20
  if (strripos($atts['v'], 'http') !== false) {
21
    $chunks = explode('/', $atts['v']);
22
    $atts['v'] = end($chunks);
23
  }
24
 
25
  /* If no height defined... */
26
  if ($atts['height'] === false) $atts['height'] = round($atts['width'] / 1.784);
27
 
28
  /* Build result */
29
  $v = 'https://videopress.com/embed/' . $atts['v'] . '?at=' . $atts['offset'];
30
  if ($atts['loop']) $v .= '&loop=1';
31
  if ($atts['autoplay']) $v .= '&autoPlay=1';
32
  $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>';
33
  if ($atts['meta'] != 0) $return .= beliefmedia_videopress_meta($atts['v'], $atts['width']);
34
  $return .= '<script src="https://videopress.com/videopress-iframe.js"></script>';
35
 
36
 return $return;
37
}
38
add_shortcode('videopress', 'beliefmedia_videopress');
1
<?php 
2
/*
3
 Get VideoPress Meta Data & Cache
4
 Embed VideoPress Videos in WordPress with Shortcode
5
 http://www.beliefmedia.com/wordpress-videopress
6
*/
7
 
8
function beliefmedia_videopress_meta($video, $width, $cache = '3600 * 24 * 7') {
9
 
10
 $transient = 'bmvp_' . md5($video . $cache);
11
 $cached = get_transient($transient);
12
 
13
  if ($cached !== false) {
14
   $return = $cached;
15
 
16
  } else {
17
 
18
    $data = file_get_contents('https://public-api.wordpress.com/rest/v1.1/videos/' . $video);
19
    if ($data !== false) $data = json_decode($data, true);
20
 
21
      /* If JSON */
22
      if ($data !== false) {
23
        $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']));
24
        if ($data['description'] != '') $return .= '' . $data['description'];
25
        $return .= '</div>';
26
        set_transient($transient, $return, $cache);
27
 
28
       } else {
29
 
30
        $return = (boolean) false;
31
 
32
      }
33
 
34
    }
35
 
36
 return $return;
37
}

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 complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.
Finance Guide, Cropped Top and Bottom
  Timezone: 1 · [ CHANGE ]

RELATED READING

Like this article?

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest

Leave a comment