• SSL URLs i.e. https://
• Embed URLs: http://www.youtube.com/v/VIDEO_ID and http://www.youtube.com/embed/VIDEO_ID

Here you are some examples:

Watch this video on YouTube.

Shortcode used:

[youtube_sc v=http://www.youtube.com/embed/ruU3Wxu8xuE]

Watch this video on YouTube.

Shortcode used:

[youtube_sc v=http://www.youtube.com/v/7R2Z7NAnUAE]

Watch this video on YouTube.

This parameter allows you to use the new embed code (iframe) or the old embed code (object).

Its possible values are: new (iframe, default) or old (object).

Here’s an example:

Watch this video on YouTube.

Shortcode used:

[youtube_sc v=http://youtu.be/5LOcUkm8m9w embedcode=old]

Mobile detection

Mobile detection is performed on the server once per page load (not per video) and it’s extremely lightweight (excellent performance).

If a visitor is browsing your site with a mobile device the plugin outputs mobile friendly code.

99% of mobile devices can be detected.

Consistent layout

Fixed width videos are not mobile friendly. In this version, not anymore since the plugin will serve fluid width videos (width=100%) to mobiles devices even if you have set a width or height in your shortcodes.

Opera Mobile/Mini special support

Opera browser (Presto engine) replaces video embed codes with an image of the video linked to the phone’s Youtube app. With this in mind, if a visitor uses Opera mobile/mini browser to visit your site, the plugin outputs the html code Opera expects. This way, design & functionality don’t break.

Test it right now: visit this site’s articles with your mobile phone!!

Changes:

• Removed noembed tag

It’s deprecated in HTML5 and mobile browsers seem to not like it. These browsers, show the video correctly (when they are capable) but also display the noembed message just below the video…which is an unwanted behavior. So, in place of the noembed tag, I’ve added a span tag…and the result is the expected cross-browser :)

• Removed noembed (span) message for RSS readers

RSS readers are the wildest environment for controling your HTML & CSS…simply put…forget it. Because every RSS reader will modify your HTML in a certain way I’ve suppressed the noembed (span) message if Flash is not available in a RSS reader. In RSS readers, though there’s a fallback that works in every RSS reader, a link below the video that says “Watch this video on Youtube” and links to the video on youtube.com.

• Video width under control in RSS readers and mobile browsers

This improvement is related to the fallback solution I’ve implemented in this version for static layouts, so read about it here.

The AS2 player uses Flash only and was deprecated time ago by Youtube (Youtube now uses the AS3 player).

Why do you add support for AS2 if it’s deprecated?

Deprecated does not mean it does not work anymore, in fact it works great as of today.

I added support for it so you can use the following parameters which are not supported by neither the AS3 Flash player nor the HTML5 player: border, color1, color2, egm, hd, and showsearch.

One of the most interesting and used parameters was hd which allowed us to force HD playback by default (720p). Well, now you can again, learn how.

How do I select the AS2 mode?

Easy pal, simply set the version parameter to 2.

Here’s a demo using the AS2 player and all those “old” parameters:

Watch this video on YouTube.

Shortcode used:

[youtube_sc v=yU-mhdHXDUc version=2 hd=1 fs=1 showsearch=0 border=1 color1=ff0000 color2=aaff5 egm=1]

Many of you already know that with the AS3 or HTML5 player, the parameter hd=1 does not force HD playback by default. The hd parameter is only available to the AS2 video player for now.

So…if you need to force HD playback by default in your videos, you can use the AS2 (Flash only) player in your site until Youtube releases a stable iFrame API (the iFrame API will allow us to choose a default playback quality per video) or enables the hd parameter for the AS3 & HTML5 players.

How to force hd?

Set the version parameter to 2 and the hd parameter to 1

Here’s an example of how to force AS2 mode and enable HD playback by default:

Watch this video on YouTube.

Here’s the shortcode used:

[youtube_sc video=Cj6ho1-G6tw version=2 hd=1 fs=1]

Some RSS readers may not show any video (because they lack support for playing videos), but I’ve covered that case too and every video has a link that says “Watch this video on YouTube” as you can see in the screenshot below.

Videos in RSS readers will look and behave as they would in your website. So, for example, if you disabled to show related videos…they’ll be disabled in a RSS reader.

Finally, you don’t have to add or modify anything to make your videos compatible with RSS readers…the plugin is clever enough :)

Have a look at how videos look in Google Reader or, even better, subscribe to the RSS feed and experience it yourself.

Easy, every Youtube video player is wrapped by a div or p tag with the class youtube_sc.

Check it out with Firebug or Webkit’s web inspector.

p tags are only used when the shortcode is inserted in a post/page wysiwyg text editor.

From version 1.8 onwards you can also target the video player through custom CSS classes you may add via the class parameter.

Bfff, the High Definition parameter hd=1 has no effect, my videos are still playing by default at a lower resolution!!

You’re right, if you’re using the iframe code or the AS3 old embed code, hd=1 parameter (720p by default) has no effect if the size of the embedded video player is smaller than 745 pixels in height.

Why is this?

With the new embed method (iframe) or the AS3 old embed code (object – Flash only), Youtube estimates the “best” video quality according to the size (dimensions) of the embedded video player. This means you need to set a height of 505px to play a video at 480p by default or a height of 745px to play it at 720p by default (when video starts playing).

The rule to calculate the height is: 25px higher than the desired video resolution/quality. So, for example, to ensure your video will play by default at a resolution of 360p, the player height should be 360+25 = 385px.

In Youtube’s website hd=1 works as expected no matter the video player size…but that only works at http://www.youtube.com

There are though 2 ways of forcing HD playback by default:

1. Using the iframe API (Javascript). Right now, it is still under development and should not be used in production.
2. Using the old AS2 (Flash only) mode. Version 1.8.1 adds support for AS2 mode so check how to force HD playback.

When the iframe API is released, I’ll add that feature to the plugin, but right now, the only way to force HD playback by default is through the AS2 mode.

WTF, I’ve installed this plugin and the WYSIWYG editor toolbar is missing or corrupt!!

Almost all of these problems are caused by the browser’s cache, or network cache.

Clear your browser’s cache, quit the browser, then start it and try again. If the problem persists, try reloading the page while holding down Ctrl (in IE) or Shift (in Firefox) to make the browser reload the page from the server.

This can also be caused by a network cache somewhere between you and your web host. Just wait for a few hours for it to expire.

If clearing the browser’s cache does not solve the problem, then deactivate and activate the plugin again.

• url, v or video: Youtube’s video URL or ID (default value = ”). Any of these is valid:
  • Normal: http://www.youtube.com/watch?v=ZUD3qUtT3go
  • Short: http://youtu.be/ZUD3qUtT3go
  • Embed: http://www.youtube.com/v/ZUD3qUtT3go or http://www.youtube.com/embed/ZUD3qUtT3go
  • SSL: https://….
  • Video ID: ZUD3qUtT3go
• width or w: Set the width of the video player in pixels (default value = 560). Minimum width allowed is 200px according to Youtube.
• height or h: Set the height of the video player in pixels (default value = 340)
• ratio: Set the aspect ratio of the video player (default value = ’16:9′). Possible values: ’16:9′ or ’4:3′.
• class: Add additional CSS class(es) to the player container (div or p) to position the player at your will.
• embedcode: Set the embed code you want to use (default value = ‘new’). Possible values are ‘new’ (iframe) or ‘old’ (object).
• version: Set the Flash player ActionScript (AS) version. Possible values are 2 or 3 (default value = 3). AS2 is deprecated (but you can still use it).
• nocookie: Set privacy mode on or off. Possible values are 0 or 1 (default value = 0). To enable privacy mode set this to 1 and no cookies will be stored in the user’s browser.
• title: Description of the video’s content or several tags related to it. Useful for SEO and Accessibility (WCAG 1.0+). (default value = ‘YouTube video player’)

Official Parameters

You can find in Youtube’s official documentation for player parameters all parameters explained and their possible and default values.

I’ll list them here for a quick reference grouped by player support:

• HTML5 – AS3 – AS2
  
• autohide: default value = 2.
• autoplay: default value = 0.
• enablejsapi: default value = 0.
• start: default value = ”.
• theme: default value = ‘dark’.
• HTML5 – AS3
  
• controls: default value = 1.
• loop: default value = 0.
• origin: default value = ”.
• playlist: default value = ”.
• AS3
  
• color: default value = ‘red’.
• modestbranding: default value = 0.
• AS3 – AS2
  
• cc_load_policy: default value = user’s Youtube account setting. To force subtitles set to 1.
• disablekb: default value = 0.
• fs: default value = 0.
• iv_load_policy: default value = 1.
• playerapiid: default value = ”.
• rel: default value = 1.
• showinfo: default value = 1.
• AS2
• border: default value = 0.
• color1: default value = ‘b1b1b1′.
• color2: default value = ‘cfcfcf’.
• egm: default value = 0.
• hd: default value = 0.
• showsearch: default value = 1.

Important notes from YouTube official documentation

The modestbranding parameter is supported for the AS3 embedded player and for IFrame embeds that load the AS3 player. (Note that IFrame embeds may also load the HTML5 player, which does not support this parameter.)

The following parameters are supported in the AS2 player but have been deprecated for the newer AS3 and HTML5 players: border, color1, color2, egm, hd, and showsearch.

The loop parameter has limited support in the AS3 player and in IFrame embeds, which could load either an AS3 or HTML5 player. Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter to 1 and set the playlist parameter value to the same video ID already specified in the url parameter:

[youtube_sc url=VIDEO_ID version=3 loop=1 playlist=VIDEO_ID]

The controls and playlist parameters are supported in the AS3 and HTML5 players but are not and will not be supported in the AS2 player.

What is a shortcode?

A shortcode is just a simple command for executing a script.

Every script has a name to identify it. The shortcode name of this plugin is youtube_sc.

WordPress parses and executes shortcodes automatically if you insert them into the default text editor of your posts/pages. All you have to do is insert (write) the shortcode into the text editor wherever you want its output to be.

Shortcodes accept parameters so that you can control the behaviour (result) of the script.

[youtube_sc url=ZUD3qUtT3go width=430]

In the shortcode above, I’m using 2 parameters: url and width

You can view the complete list of shortcode parameters this plugin accepts here.

Basic usage in a post/page editor

Insert the shortcode manually wherever you want into the text editor or use the editor’s Youtube button (1.7+) to generate and insert the shortcode for you.

[youtube_sc url=http://youtu.be/ZUD3qUtT3go]

The shortcode above outputs this video:

Watch this video on YouTube.

The url parameter (or any of its aliases like video or v) is the only one required in order to display a Youtube video. Its value is either a Youtube video URL or a Youtube video ID.

This plugin gives you a great bunch of parameters so you can customize the position, appearance and behaviour of each Youtube video.

To know more about available parameters please go to the Shortcode parameters page.

WordPress also allows us to execute shortcodes in template files.

Basic usage in a wordpress template file

<?php echo do_shortcode('[youtube_sc url=http://www.youtube.com/watch?v=ZUD3qUtT3go width=300 rel=0 fs=1]'); ?>

This shortcode will embed a Youtube video of 300px wide with an automatically calculated height wherever you need in your site. It will disable related videos and enable the fullscreen button.

Recommended shortcode parameters for any Youtube video

[youtube_sc url=VIDEO_ID_OR_URL rel=0 fs=1 autohide=1 modestbranding=1]

Want to know more about shortcodes?

If you haven’t used shortcodes yet, please take some time and read these wordpress docs:

• http://codex.wordpress.org/Shortcode
• http://codex.wordpress.org/Shortcode_API

Use the one you like most :)

Possible values are: 16:9 for widescreen and 4:3

Here you are some examples:

16:9 aspect ratio

Watch this video on YouTube.

Shortocode parameters used:

v=CIcIyVQ3E_E ratio=16:9

4:3 aspect ratio

Watch this video on YouTube.

Shortocode parameters used:

v=CIcIyVQ3E_E ratio=4:3

Watch this video on YouTube.

In version 1.8 I’ve added the class parameter.

All it does is add class names to the video wrapper.

If you need to add 2 or more class names, all you have to do is wrap them between double quotes (class=”class1 class2″).

This way you can, for example, position a video to the right of your text in a post such as this one :)

Shortcode parameters used:

url=http://youtu.be/CIcIyVQ3E_E w=400 class=alignright

This layout is suitable for any device wether it’s desktop (big screens) or mobile (smaller screens).

It doesn’t matter if a website uses a static, fluid or elastic layout, the video will adapt to fit.

Use this layout if you are designing either a mobile website or a website with fluid or elastic areas.

For example, if a mobile screen it’s only 300px wide the video player will adjust to the width of its parent container and thus, it will fit perfectly (it won’t break or overflow the layout/design).

Test it right now:

Visit this article with your mobile phone or resize the browser window and you’ll see how the video player adapts to fit.

How to use:

Simply put: Do not set the width and height parameters.

Watch this video on YouTube.

Shortcode parameters used:

v=CIcIyVQ3E_E

It is recommended for static layouts (fixed width layouts) but not for fluid, elastic and mobile layouts.

So, if you’re building a website today, use preferrably the new fluid layout (default) version 1.8 offers.

Note however that from version 1.8.1 onwards, I’ve added a fallback solution for fixed-width videos. This fallback solution avoids fixed-width videos from breaking or overflowing a layout/design when your website is viewed in a smaller screen or the browser window is resized. The downside is the aspect ratio is not preserved.

Test it right now: Resize your browser window or visit this article with your mobile phone.

Watch this video on YouTube.

Shortcode parameters used:

video=http://youtu.be/CIcIyVQ3E_E w=450

This parameter sets a “title” HTML attribute on both iframe & object HTML elements. Its value should be a description of the video’s content or several tags related to it.

It’s very useful for SEO and Accessibility (WCAG 1.0+).

The title may not show up when you hover the video with your mouse. If that is the case inspect the iframe tag with Firebug or your browser’s developer tools.

Here’s an example:

Watch this video on YouTube.

Shortcode parameters used:

url=k2vkwy2vdP4 title="Big wave surfing" width=400

In order to make the shortcode work properly when creating a shortcode with a “title” attribute in a template file you must call the function Youtube_shortcode::encode_str(title):

<?php echo do_shortcode('[youtube_sc url=DVwTmClYF3I title='. Youtube_shortcode::encode_str("My description of the video's content") .']'); ?>

Wether you are using double or single quotes to wrap the title parameter’s value, you must use that function.

However, if you’re using the TinyMCE button to embed YouTube videos you don’t need to worry about this (the plugin does it for you).

Every customization option (shortcode parameter) is available through the TinyMCE button.

The only required parameter to insert the shortcode is the Video URL or ID.

The shortcode is automatically generated and inserted in the editor.

Here’s a screenshot:

The Adobe Flash Player is required for video playback.
Get the latest Flash Player

Here’s a screenshot of this website emulating this scenario (I disabled manually Js and Flash):

Use the one you like most :)