Blog, WordPress, WordPress Plugins, WordPress Shortcode, YouTube

Embed Responsive YouTube Videos in WordPress With Shortcode

While YouTube does makes it simple to embed a video into your website, the method doesn't come without its disadvantages - styles and features are limited, scalability isn't enabled by default, and changing site-wide occurrences of video presentations is problematic. This article introduces a WordPress shortcode that'll permit you to include single videos and playlists into a post or page with ease via the use of WordPress shortcode.

Note: Post updated on March 13th 2021 with revised shortcode. Google has deprecated a number of stylistic and functional parameters requiring a quick rewrite of the four-year-old code. Our API-based code is more appropriate for advanced use (such as when requiring a search feature). We've scheduled an article here that introduces a block for Elementor which includes the features described below in a drag-and-drop manner (the block is included by default in our client WP Plugin). The ability to add video chapters in a website list which will alter the scrubber play position is detailed here, and if you're interest in our marketing software we have an article scheduled here that will showcase the full suite of Yabber's

YouTube tools (this includes rather unique features such as the ability to automatically alter YouTube banners and playlists based on website traffic, and a feature to send a full-featured video to a dedicated post type in WordPress after it is created).

Video Demonstration

The following video introduces the basic usage of the shortcode and WP Plugin.

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="PLR6JWLm3S69cmRsglaYYGa7Jy0GDbsI44"]. 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:~~. Search playlists are no longer supported.

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"], the defined video (in this case, kVUy4i130iMM) will play before your playlist.

Shortcode Parameters

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

v

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.

width

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.

height

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.

autoplay

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

hd

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.

start

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

end

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

listtype

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.

list

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 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. Note that search is no longer supported.

playlist

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.

privacy

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

modestbranding

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.

loop

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

controls

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".

rel

By default our shortcode won't show 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.. This feature has changes since the first block of code was written; using rel="1" in your shortcode now forces related videos from your own channel - generally preferred behaviour. Set to rel="0" to show videos from any channel.

showinfo

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.

cc_load_policy

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).

color

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. By default, the player uses the color red in the video progress bar. To use the white progress bar, use color="white" (this disables modest branding options).

disablekb

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

fs

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

hl

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.

iv_load_policy

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.

<?php

Embed YouTube Videos in WordPress With Shortcode

http://www.beliefmedia.com/youtube-videos-wordpress-shortcode

https://developers.google.com/youtube/player_parameters

function beliefmedia_embed_yt_player($atts, $content = null) {

$atts = shortcode_atts(array(

'v' => false,

'width' => '560',

'height' => false,

'autoplay' => false,

'hd' => true, /* 16: 9, SD 4:3 */

'start' => false, /* Seconds from the start of the video */

'end' => false, /* End video 'seconds' from start */

'playlist' => false, /* comma-separated list of video IDs to play AFTER first defined video */

'list' => false, /* ID of list, used in company with listType */

'listtype' => false, /* permitetd: playlist, user_uploads */

'rel' => '0', /* Set to 1 to show related video from any channel, 0 for your own */

'privacy' => false,

'cc_lang_pref' => 'en',

'cc_load_policy' => '0',

'color' => 'red', /* red (default) & white :: color progress bar */

'modestbranding' => '1', /* 0 - show YouTube branding */

'playsinline' => '0', /* play inline or fullscreen in an HTML5 player on iOS */

'controls' => '1', /* 0 (no controls), 1 (controls pre-load, default), or 2 */

'disablekb' => '0', /* 0 - disables keyboard shortcuts */

'enablejsapi' => 0, /* 1 enables player controlled via IFrame or JS API calls */

'fs' => '1', /* 0 disables full screen option */

'hl' => 'en', /* Interface language http://www.loc.gov/standards/iso639-2/php/code_list.php */

'iv_load_policy' => true,

'loop' => false /* 1 - loops video */

), $atts);

/* Determine height of video */

if (!$atts['height']) $atts['height'] = ($atts['hd']) ? '56.06%' : '75%';

/* Get video ID from $v (if required) */

if ($atts['v'] !== false && strpos($atts['v'], 'https') !== false) {

preg_match("#(?<=v=)[a-zA-Z0-9-]+(?=&)|(?<=v\/)[^&\n]+(?=\?)|(?<=embed/)[^&\n]+|(?<=v=)[^&\??n]+|(?<=youtu.be/)[^&\n]+#", $v, $matches);

$v = $matches['0'];

}

$a .= 'origin=' . site_url();

if ($atts['autoplay']) $a .= '&autoplay=1';

$a .= '&rel=' . $atts['rel'];

$a .= '&cc_lang_pref=' . $atts['cc_lang_pref'];

$a .= '&cc_load_policy=' . $atts['cc_load_policy'];

$a .= '&color=' . $atts['color'];

$a .= '&modestbranding=' . $atts['modestbranding'];

$a .= '&playsinline=' . $atts['playsinline'];

$a .= '&controls=' . $atts['controls'];

$a .= '&disablekb=' . $atts['disablekb'];

$a .= '&enablejsapi=' . $atts['enablejsapi'];

if ($atts['start']) $a .= '&start=' . $atts['start'];

if ($atts['end']) $a .= '&end=' . $atts['end'];

$a .= '&fs=' . $atts['fs'];

$a .= '&hl=' . $atts['hl'];

$a .= ($atts['iv_load_policy'] !== false) ? '&hl=1' : '&hl=3';

if ($atts['loop'] !== false) $a .= '&loop=0';

$a .= '&widget_referrer=' . esc_url(get_permalink());

/* Playlist */

if ($atts['playlist'] !== false || $atts['list'] !== false) {

/* Search no longer available as a listType */

$permitted_listtype = array('playlist', 'user_uploads');

if ($atts['listtype'] !== false && in_array($atts['listtype'], $permitted_listtype) && $atts['list'] !== false) {

$l = (strlen(substr($atts['playlist'], 0, 2)) != 'PL') ? 'PL' . $atts['list'] : $atts['list'];

$a .= '&playlist=' . $atts['playlist'] . '&list=' . $l . '&listType=' . $atts['listtype'];

$atts['v'] = '';

} elseif ($atts['listtype'] !== false && $atts['list'] !== false) {

$l = (strlen(substr($atts['list'], 0, 2)) != 'PL') ? 'PL' . $atts['list'] : $atts['list'];

$a .= '&listType=playlist&list=' . $atts['list'];

} elseif ($atts['playlist'] !== false && (strpos($atts['playlist'], ',') !== false)) {

$a .= '&playlist=' . $atts['playlist'];

}

/* Return Video Container */

$return = '<div style="position: relative; height: 0; padding-bottom: ' . $atts['height'] . '; margin-bottom: 30px; margin-top: 30px;"><iframe src="https://www.youtube.com/embed/' . $atts['v'] . '?ecver=2&' . $a . '" style="position:absolute; width:100%; height:100%; left:0" width=”642" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>';

return str_replace(array("\r", "\n"), '', $return);

}

add_shortcode('youtube', 'beliefmedia_embed_yt_player');

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.

Platform Usage

YouTube is heavily integrated into our Yabber Digital Marketing and Social Media platform. To set default behaviour for all videos globally, you may do so via the YouTube section of the Platform. In our case we simply store the default options and merge them with the $atts array before returning a video.