Home Blog Embed Responsive YouTube Videos in WordPress With Shortcode

Embed Responsive YouTube Videos in WordPress With Shortcode


In our introductory post on shortcodes we introduced a feature that would embed a YouTube video into your WordPress website with shortcode. While YouTube does makes it simple to embed a video into your website, the method doesn’t come without its disadvantages – some of which are listed below.

  • WordPress’ editor can often cause unpredictable results when pasting code of any type – particularly when using the visual editor.
  • If you change WordPress themes or alter the existing design of your website (or simply alter the width of all your video containers), youll have to alter every occurrence of the YouTube embed code on your website to ensure that they render correctly.
  • If YouTube alters their embed code (as they have done in the past), your embeds may cease to work.
  • If YouTube adds another feature to their video presentation and you want to make the same change to your videos, you’ll have to edit every occurrence of the embed code on your website.
  • The default embed options on the YT website don’t cover all the available options available to you.
  • YouTube’s default iframe embed code isn’t designed to align in the center of your page, and it won’t scale on mobile devices.

All of the above obstacles can be navigated by way of our shortcode function (or WP plugin). While there’s a large number of shortcode options, the most popular are simple and intuitive to remember. The more complex options, such as playlists, might require you revisit this page for correct shortcode structure.

The benefits of using our shortcode function (or WP plugin) are as follows:

  • For basic videos, you’ll only need to reference a video in your shortcode.
  • If you change themes or alter your design you will only need to alter the width attribute in the shortcode function. It’s a set and forget setting that’ll apply for each video you embed.
  • If YouTube adds a new feature, we’ll update the shortcode and it’ll be made available to you.
  • Any alteration to the shortcode function will apply the change to every single YT video on your website.
  • The video is scalable, adds weight to your SEO score, and looks great on any mobile device.
  • By default we’ll remove YouTube branding and prevent trailing featured videos from displaying. Both of these options can be disabled and then selectively applied.

Video Demonstration

We’ll likely make short videos to support most of the plugins and code we provide in the future. This is the first.

YouTube Embed Examples

Single Videos

To embed a single video with shortcode, use [youtube v="kVUy4i130iM"]. Virtually any YouTube URL is accepted; we’ll fetch the video ID. That said, it’s best practice to include only the video ID. The result is as follows:

To play only a selected portion of a video, simply define the start and end time in seconds as follows: [youtube v="vbxl3hc_pL8" start="121" end="138"]. The result is as follows:

A number of options can be applied, and they’re listed below as “shortcode attributes”.

Display a YouTube Video Playlist

A playlist can be a user created playlist, the results of a search, or user uploads. Additionally, you can provide your own comma separated list of video ID values.

To display a user created playlist – in this case one from Flight’s channel – we’ll use [youtube listtype="playlist" list="R6JWLm3S69c0RPUV87ZUdlLDwe6dFg5V"]. The result:

In another example of a playlist, this time for a search term, we’ll use [youtube listtype="search" list="space flight"]. The result:

Display a Custom Playlist

A custom playlist includes a comma seperated list of any video of your choosing. For example, [youtube playlist="rE6a7uFJoss,Itjvfy2pBxA,NfQprOcjO3c"]. The result:

If a primary video is defined (as youtube v=”kVUy4i130iM playlist=”rE6a7uFJoss,Itjvfy2pBxA,NfQprOcjO3c”], that video will play before your playlist.

Shortcode Parameters

The following shortcode options are available. Many of the descriptions come from Google’s player parameter page .


For an individual video, the v, or video ID, is required. To an embed a basic video it’s the only attribute that’s required.


The shortcode is essentially ready to use. The only option that you’ll be required to change in the shortcode function that you download is the width. This should be set to style with the width of your post container.


The height should almost always be left blank. Rather, we have a HD (true/false) option below that’ll automatically scale the video as required.


If autoplay="1" the video will automatically play on page load. It’s false by default.


By default we’ll display the standard widescreen video container (16:9). If you’re embedding standard definition video, use hd="0". This attribute negates the need to specify a height.


To start the video at a certain point, use start="75", where 75 is the number of seconds from the beginning of the video.


To end the video at a certain point, use end="127", where 127 is the number of seconds from the beginning of the video.


The listtype attribute is used in company with the list attribute below. The listtype should be set to playlist, search, or user_uploads. The list below provides the value.


The list parameter, in conjunction with the listType parameter (above), identifies the content that will load in the player. If the listType parameter value is search, then the list parameter value specifies the search query. If the listType parameter value is user_uploads, then the list parameter value identifies the YouTube channel whose uploaded videos will be loaded. If the listType parameter value is playlist, then the list parameter value specifies a YouTube playlist ID. If you specify values for the list and listType parameters, you do not need to specify a video ID.


To render a custom playlist, you do so with comma separated video id values as follows: [youtube playlist="rE6a7uFJoss,Itjvfy2pBxA,NfQprOcjO3c"]. They ID can be from any account and reference any video. If you also specify a video ID, that video will play first.


Use privacy="1" to use the www.youtube-nocookie.com domain. Usually not required.


This URL parameter lets you use a YouTube player that does not show a YouTube logo. By default we don’t show it. Use modestbranding="0" in your shortcode to enable the logo, or alter the shortcode function to avoid repeatedly having to include it.


To loop a single video over and over, use loop="1".


The controls indicates whether the video player controls are displayed. If controls="0" no player controls will be shown. If controls="1" the controls load on page load, and if controls="2" the controls appear with user interaction. by default, controls="1".


By default we don’t show the related videos at the end of your video. If you would like to enable this feature, use rel="1" or alter the shortcode function if you’d like this feature enabled for all embeds.


Setting the parameter’s value to 0 causes the player to not display information like the video title and uploader before the video starts playing. Enabled by default.


This is a flash specific parameter so can generally be ignored. It indicates whether the video controls will automatically hide after a video begins playing.


Setting cc_load_policy="1" causes closed captions to be shown by default, even if the user has turned captions off. The default behavior is based on user preference. By default the value is 0 (false).


This parameter specifies the color that will be used in the player’s video progress bar to highlight the amount of the video that the viewer has already seen. Valid parameter values are red and white, and, by default, the player uses the color red in the video progress bar. To use the white progress bar, use color="0".


By default keyboard shortcuts are disabled. To enable, use disablekb="1" (the spacebar and arrows control playback).


To disable the ‘full screen’ option, use fs="0". The feature is enabled by default.


You can optionally provide a interface language . If this were required it would be best to do it via the actual function rather than using it in your shortcode on every occasion.


Setting the parameter’s value to 1 causes video annotations to be shown by default, whereas setting to 3 causes video annotations to not be shown by default. Our default value is 3 (disabled).

Options not discussed include enablejsapi, origin, and playsinline. If you’re looking for these features, you don’t need us to explain them to you. More details on player parameter options are available here .

The Shortcode Function

It’s always best to download the shortcode function rather than copy text. Alternatively, we’ve provided a WordPress plugin you can use like any other.

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

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.


Title: Embed YouTube Videos in WordPress With Shortcode
Description: Embed responsive YouTube videos or playlists in WordPress with shortcode (or plugin).
Download: Shortcode (V0.1) | WP Plugin (V0.1) | | Plugin Page

Shortt URL for this post: http://shor.tt/2nHH


Please enter your comment!
Please enter your name here