=== Plugin Name === Contributors: Tubal Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6W2TXS68W7A8Y Tags: youtube, shortcode, embed, video, player Requires at least: 2.5 Tested up to: 3.2 Stable tag: trunk Embed customized Youtube videos & playlists anywhere using shortcodes == Description == A really simple and lightweight plugin to embed customized Youtube videos & playlists anywhere in your blog or website using wp shortcodes. = Features: = * Supports **all official player customization parameters** and respects Youtube's default values: [Official documentation](http://code.google.com/intl/en/apis/youtube/player_parameters.html "Official documentation"). You can override any default value. * Supports **TinyMCE editor button** (1.7+ version) to make it easier for you to customize the Youtube video player (auto-inserts the shortcode). * Supports **automatic calculation of video height**. Just set the video `width` and omit the `height` parameter in the shortcode. There's no need to set a height manually to get the perfect height. * Supports **automatic localization of Flash videos** ("old embed code" only). This plugin detects the visitor's preferred language to set the default language of the Youtube player UI & the video's captions/subtitles (otherwise en_US would be set by default for every visitor). * Supports **normal** Youtube URLs, **short** Youtube URLs and Youtube's **video ID** as value for `url` parameter. * Supports **setting a different "title" attribute** for each Youtube video (useful for **SEO** & **Accessibility**). * Supports **Flash & HTML5 videos**. This plugin uses Youtube's new embed code (iframe). This new embed code will take care of the environment capabilities. This way you know your video will work on most devices, including mobile devices (that have Adobe's Flash 10.1 installed or support CSS, iframes and basic Javascript) and RSS readers. * Supports **web browsers with no Javascript support or with Javascript disabled**. If a web browser does not support Javascript or Javascript is disabled, Youtube's new embed code will not work. In that case this plugin will try to show the video using Adobe's Flash (If Flash is not installed or enabled, the plugin will show the user what to do). * **Developer friendly:** `wp-content` directory can be renamed or moved safely to a different location. For more info read [Moving wp-content](http://codex.wordpress.org/Editing_wp-config.php#Moving_wp-content) * Tested on IE 6+, Firefox 2+, Opera 8+, Safari 3+, Chrome 5+, Webkit mobile (iPhone, iPad, iPod, Android phones, Nokia tablets). = Roadmap = In version 1.8 I'll develop a settings page so that you can store configuration defaults for every Youtube video. Support its development [donating a few bucks :)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6W2TXS68W7A8Y) (PayPal). = Documentation = **Shortcode Name:** This is the shortcode name you must use to make the plugin work: `youtube_sc`. **Basic examples:** Example 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. Example 2: `[youtube_sc url=ZUD3qUtT3go width=430]` You can also embed a customized Youtube video in your posts or pages easily by writing the shortcode in the built-in WYSIWYG editor. Example 3: `` This shortcode embeds a Youtube video using a short Youtube url. The player controls will autohide and their background color will be a light gray. The progressbar color will be white. Example 4: How to set the "title" attribute in a call to do_shortcode() `` This shortcode embeds a Youtube video and sets the "title" html attribute (useful for SEO and Accessibility). Note the use of a static call to `Youtube_shortcode::encode_str( string )`. You must call that function in order to make the shortcode work properly when creating a shortcode with a title attribute in a template file. However, if you're using the TinyMCE button to embed YouTube videos you don't need to worry about this. **Custom Parameters:** * `url`: Youtube's video URL (default value = ''). Any of these is valid: * Normal: http://www.youtube.com/watch?v=ZUD3qUtT3go * Short: http://youtu.be/ZUD3qUtT3go * Video ID: ZUD3qUtT3go * `width`: Set the width of the video player in pixels (default value = 560). Minimum width allowed is 200px according to Youtube. * `height`: Set the height of the video player in pixels (default value = 340) * `version`: Set the Flash player ActionScript version. Possible values are 2 or 3 (default value = 3) * `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+). Available since version 1.7.1. (default value = 'YouTube video player') **Official Parameters:** You can find in [Youtube's official documentation for player parameters](http://code.google.com/intl/en/apis/youtube/player_parameters.html "Official documentation") all parameters explained and their possible and default values. I'll list them here for a quick reference: * `autohide`: (default value = 2) * `autoplay`: (default value = 0) * `border`: (default value = 0) * `cc_load_policy`: (default value = user's Youtube account setting. To force subtitles set to 1) * `color`: (default value = 'red') * `color1`: (default value = 'b1b1b1') * `color2`: (default value = 'cfcfcf') * `controls`: (default value = 1) * `disablekb`: (default value = 0) * `egm`: (default value = 0) * `enablejsapi`: (default value = 0) * `fs`: (default value = 0) * `hd`: (default value = 0) * `iv_load_policy`: (default value = 1) * `loop`: (default value = 0) * `modestbranding`: (default value = 0) * `origin`: (default value = '') * `playerapiid`: (default value = '') * `playlist`: (default value = '') * `rel`: (default value = 1) * `showinfo`: (default value = 1) * `showsearch`: (default value = 1) * `start`: (default value = '') * `theme`: (default value = 'dark') == Installation == 1. Upload `youtube-shortcode` folder to the `/wp-content/plugins/` directory 2. Activate the plugin through the 'Plugins' menu in WordPress 3. Place `` in your templates or just `[youtube_sc url=any_youtube_video_url]` in a post/page text editor and you're done == Frequently Asked Questions == = Hey, I need to style the video player with css ¿How can I target it with a css selector? = 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. = 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**. = Bfff, the High Definition parameter `hd=1` has no effect, my videos are still playing by default at a lower resolution!! You're right, `hd=1` (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), 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 The only way to force a default video resolution (quality such as 360p, 480p, 720p...) is through the [iframe API](http://code.google.com/intl/en/apis/youtube/iframe_api_reference.html) (Javascript) but right now, it is still under development and should not be used in production. When that API is released, I'll add that feature to the plugin, don't worry, but right now, it is not possible to set a specific video quality for each video since it's determined by the size of the video player & the video quality when it was uploaded (not every video can be played at 720p for example). Take a look at this doc for further info on Youtube's embedded player: [http://www.google.com/support/youtube/bin/answer.py?hl=en&answer=178264](http://www.google.com/support/youtube/bin/answer.py?hl=en&answer=178264) == Changelog == = 1.7.3 = * The `get_hl()` method is back to set the UI & captions/subtitles language according to the visitor's language (automatically detected) for a very specific case: When the visitor's browser does not support Javascript or it is disabled. In this case, the old embed code (Flash only) will be embedded so we have to detect the visitor's language (otherwise en_US would be set as default). * Now the `get_hl()` method is invoked only once per page load. Before this release it was invoked for every shortcode/video so the plugin execution is faster. * Added `` tag to extend compatibility with browsers with no Javascript support and no Flash support. The following message (styled exactly like Youtube's) will be shown to the user on each video: The Adobe Flash Player is required for video playback. [Get the latest Flash Player](http://get.adobe.com/flashplayer/) * Other internal improvements. * This is the final update in the 1.7 branch. It's recommended to update. = 1.7.2 = * Improvement: Removed `get_hl()` method (private use) since it isn't needed anymore. Youtube detects the user language and sets the UI & captions/subtitles language accordingly. * Improvement: When javascript is disabled the CSS selector used to hide the iframe is now scoped by the class `youtube_sc`. Before this release the CSS selector used could override any iframe with a class `youtube-player`. * Other improvements (faster execution & more robust). It's recommended to update. = 1.7.1 = * Added new custom parameter: `title`. Very useful for SEO and Accessibility (WCAG 1.0+). This parameter sets the "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. Please, see example 4 to know how to use it in templates. * Bugfix: TinyMCE editor: Shortcode wouldn't work if the comma separated list of video IDs in `playlist` had any space character. = 1.7 = * Added TinyMCE button so that users can insert and customize a Youtube video easily. The shortcode is automatically generated and inserted in the editor. * Added new official parameters: color, theme * Added donation link * Flash player ActionScript version 3 by default (AS2 is deprecated according to Youtube official docs) * `wp-content` directory can be renamed or moved to a different location. For more info read [Moving wp-content](http://codex.wordpress.org/Editing_wp-config.php#Moving_wp-content) * Code refactored to clean up the gobal namespace (now there's only a class named Youtube_shortcode). = 1.6 = * The video's html wrapper tag, `div` by default, changes automatically to `p` if the shortcode is used in a post/page wysiwyg text editor to avoid weird cases with WP formatting functions and other filters or plugins. = 1.5 = * Added new official parameters: autohide, controls, modestbranding, origin, playlist = 1.4 = * Force "wmode=transparent" on Youtube's new embed code (iframe) to solve some design issues when Flash is used (layers appearing below Flash video). = 1.3 = * Youtube's new embed code (iframe) is from now on the preferred way of embedding videos and supports all customization parameters. * swfobject javascript library removed. Client side detection of Adobe's Flash is no longer needed. = 1.2 = * Added "wmode=transparent" to solve some design issues (layers appearing below Flash video) = 1.1 = * Improved automatic height calculation. * Added support for web browsers with no Javascript support.