1. Code
  2. Plugins

Creating a Shortcode for Responsive Video


If you're anything like me, you use YouTube to host any video you add to your WordPress site. It saves worrying about browser or device compatibility, it saves space on your servers, and it can be a lot more reliable.

In addition, it means your videos can be accessed by YouTube viewers as well as visitors to your site or blog.

However, adding streamed YouTube videos has two downsides:

  1. By default, they aren't responsive. Videos are contained in a <iframe> element and with the best will in the world, you can't make one of those responsive.
  2. If you're developing a site for clients who aren't coders, expecting them to open up the 'Text' tab of the Post Editor and copy in an embed code from YouTube may be too daunting for them, or - even worse - it may give them an opportunity to break the site.

In this tutorial I'll show you how to create a shortcode enabling you or your client to add embedded YouTube video in the 'Visual' editing view and will automatically make that video responsive.

Note: Instead of adding code to a theme's functions file and/or stylesheeet, I recommend creating a plugin to add this to your site, which is the method I'm following. It keeps everything in one place and means you can enable the plugin in mutliple sites to use the shortcode as much as you need.

What You'll Need to Complete This Tutorial

To complete this tutorial, you'll need:

  • A development or test site with WordPress installed
  • A code editor
  • An FTP program to upload your plugin (which may be incorporated into your code editor)

Setting Up the Plugin

Start by opening a new file in your text editor, and naming it - mine is called wptutsplus-responsive-video-shortcode.php but you can call yours whatever you like.

In the file, insert the following code:

This sets up your plugin and tells WordPress its name and version.

Adding the Shortcode Function

Below this opening text, add the function which will create the shortcode and hook it to the add_shortcode action hook:

This creates the shortcode itself. Let's look at what that shortcode will output:

  • A containing div with the class wptuts-video-container, which will be used to add CSS to make the video responsive
  • An iframe element within that containing div
  • The link to the YouTube video within the embed code, with $identifier in place of the unique identifying code for the video
  • An attribute of $identifier which the user will specify when adding the shortcode to a page or post on the site. This means that he or she won't need to type or copy the whole embed code

Adding CSS to Make Things Responsive

The next step is to add the styling which will make that containing div responsive. Open a new file in your code editor and call it style.css. In the new stylesheet add the following:

What this does is the following:

  • It makes the cointaining div responsive, using padding-bottom to define the aspect ratio (in this case 16:9). The padding-top declaration provides the space for the border at the top of the video. Using padding-bottom instead of height means that if the div is resized, it will maintain its aspect ratio.
  • It adds absolute postiioning to the iframe element, ensuring that it fills the space taken up by the containing div. This makes the video responsive.

Now save your stylesheet.

Registering the Stylesheet in the Plugin

The final step is to register the stylesheet within the plugin so it makes use of the CSS you've just added.

Open the plugin file again. Above the code for the shortcode itself, add the following:

This registers the stylesheet and enqueues it using wp_enqueue_scripts, which is the correct way to add stylesheets and scripts in WordPress.

Using the Shortcode

Now save both of your files in a folder with the name of your plugin - I'm calling my folder wptutsplus-responsive-video-shortcode. Save this and upload it to the plugins folder in your test site. Activate the plugin.

I'm going to use a Lego Superheroes video (as I know that will make my sons happy). Its unique identifier is O56p5nOYNHo, which you can copy from the URL when viewing the video on the YouTube site. In a new or existing post or page, add the shortcode as follows:

[responsive-video identifier="O56p5nOYNHo"]

Save the post and view it. You'll find that the video is streamed, as shown in the screenshot:


Now try resizing your browser window, or viewing the post on a mobile device. The video automatically resizes:


So you're now able to stream any YouTube video you want into your site without straying from the Visual Editor and without having to worry about users on different devices.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.