Responsive Video Shortcode

A WordPress Plugin

Responsive Design

Simply embedding an HTML5, YouTube, or Vimeo video into a Responsive theme doesn’t make it responsive.

If the Responsive theme hasn’t implemented a solution to support video, these video components will be a thorn in the side.

The EASY way to make your YouTube, Vimeo, or HTML 5 videos Responsive!

Include a Shortcode:

1
    [video src="http://www.youtube.com/embed/wtSKzHxVqxQ"]

This WordPress shortcode is as easy as it gets. Resize this page and/or view it in your mobile device to test the results of this code snippet.

No Flash – Just HTML 5

Flash just isn’t supported in all (or even most) mobile devices. This means that embedding your own MP4 or OGG videos with some players won’t work.

The Responsive Video Shortcut plugin uses HTML 5 for personal videos and audio files. This means you can load and play video (and audio) files on mobile devices and still have a Responsive display.

Supported Files:

The following is a list of supported video and audio files that the Responsive Video Shortcode Plugin understands. There are no additional attributes or parameters needed to identify these files, just provide a valid source.

Video Networks
- YouTube
- Vimeo

Video Files
- MP4
- OGG

Audio Files
- MP3
- OGG
- WAV

Using The Shortcode

There are three different shortcodes available: (1) audio (2) video and (3) videoframe. Each shortcode serves a unique purpose.

Audio

The audio shortcode is clearly for audio and uses the HTML 5 audio control.

1
2
3
4
5
6
7
Simple shortcode use for an MP3 audio file:
 
    [audio src="http://example.com/audio/file.mp3"]
 
This example will center the control.
 
    [audio src="http://example.com/audio/file.mp3" center="true"]
Video

The video shortcode requires a source and nothing more. The plugin will determine how to create the video element, depending on the type of source provided.

1
2
3
4
5
6
7
This is an HTML 5 MP4 video file:
 
   [video src="http://example.com/video/file.mp4"]
 
This is a YouTube video link (use vimeo links the same way):
 
   [video src="http://www.youtube.com/embed/Qtg9axTtNLg"]
VideoFrame

You can use the VideoFrame shortcode to embed your own iFrame or Object code, allowing for more flexible video controls and options.

1
2
3
   [videoframe]
       <iframe src="http://www.youtube.com/embed/Qtg9axTtNLg" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
   [/videoframe]

Comments

  1. Chris Brown says:

    Thanks for putting this together Michael N. -Chris

Speak Your Mind

*