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
widthattribute 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.
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
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.
The following shortcode options are available. Many of the descriptions come from Google's player parameter page .
v, or video ID, is required. To an embed a basic video it's the only attribute that's required.
heightshould almost always be left blank. Rather, we have a HD (true/false) option below that'll automatically scale the video as required.
autoplay="1"the video will automatically play on page load. It's false by default.
hd="0". This attribute negates the need to specify a height.
startthe video at a certain point, use
start="75", where 75 is the number of seconds from the beginning of the video.
endthe video at a certain point, use
end="127", where 127 is the number of seconds from the beginning of the video.
listtypeattribute is used in company with the
listattribute below. The
listtypeshould be set to
user_uploads. The list below provides the value.
listparameter, in conjunction with the
listTypeparameter (above), identifies the content that will load in the player. If the
listTypeparameter value is
search, then the list parameter value specifies the search query. If the
listTypeparameter value is
user_uploads, then the list parameter value identifies the YouTube channel whose uploaded videos will be loaded. If the
listTypeparameter value is
playlist, then the list parameter value specifies a YouTube playlist ID. If you specify values for the
listTypeparameters, you do not need to specify a video ID.
[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.
privacy="1"to use the
www.youtube-nocookie.comdomain. Usually not required.
modestbranding="0"in your shortcode to enable the logo, or alter the shortcode function to avoid repeatedly having to include it.
controlsindicates 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,
rel="1"or alter the shortcode function if you'd like this feature enabled for all embeds.
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).
disablekb="1"(the spacebar and arrows control playback).
fs="0". The feature is enabled by default.
Options not discussed include
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.
This snipped is due for an update and will be replaced soon.