Documentation

5.0.3 Overview

Content - YouTube (No Cookies) is a YouTube embed plugin, utilizing the cookie-less domain offered by YouTube.  This plugin implements ALL available features of YouTube iframe embeds.

Installation

1. Download Content - YouTube (No Cookies) from the RicheyWeb download page.  
   • This page will remain unlinked, as the link may change in the future.  Visit http://www.richeyweb.com and use the search feature - search for "Content - YouTube (No Cookies)".
2. In Joomla /administrator, go to the "Extensions" menu, the "Manage" sub-menu, and the "Install" sub-menu.
3. Select the "Upload Package File" tab
4. Press the "Choose File" button to browse your system and locate the plugin file you downloaded
5. Press the "Upload & Install" button

At this point, the extension is installed but not enabled.  You can find the plugin by going to the Extensions menu and selecting "Plugins".  When in the plugin manager, search for "Content - YouTube (No Cookies)".  

Configuration

Defaults

The Defaults tab holds 21 configurations that control the video iframe.  Each item has a mouseover tooltip that gives a brief description of the function of that item, and the label is a link to the YouTube documentation for the item.  Many items depend on each other, and enabling one item may prevent another from operating as expected.

When set to something other than the plugin default, these items alter the way ALL embeds behave on the site.  A sort of global default setting.  If you choose "autoplay" = Yes here, then all videos will autoplay unless overridden.

Instructions

All 21 of the YouTube embed options are made available via this plugin. They can be configured in 3 ways, and are applied in increasing priority:

1. Plugin Defaults

   Configurations made within the plugin (Defaults tab) are applied to all videos. Each item in the Defaults tab is the actual variable name as you would see it in a YouTube URL. Item labels link to the YouTube documentation, and hovering over the item labels will show a brief description as well as describe the default values.

   Any item altered from the default value will be applied to ALL videos embedded by this plugin, unless overridden by a query var, or the plugin tag.

2. URL Query Vars

   Often, URLs copied will contain query vars (controls=0&start=35). These query vars override the defaults set in the Defaults tab. If you have set a default and the displayed video isn't displaying as you expected, check the URL to be certain you aren't overriding it with a query var.

   Query vars override plugin defaults (set in the Defaults tab), but can be overridden by parameters in the plugin tag.

3. Plugin Tag Parameters

   When using the plugin tags {yqnc}, you can add any of the options in the Defaults tab to the tag to override both the URL query vars, and the plugin defaults.

   For example, if you had set the "color" default to "white" in the Defaults tab, adding that variable to the plugin tag would allow you to change it back to red: {​ytnc color="red"}https://www.youtube.com.....{/ytnc}

   Although some of the parameters could be written without quotes, it is recommended that you always quote the parameters.

   I can't show all of the possible configurations, because there are 3,055,350,753,492,610,000,000 possible plugin tag combinations. URL query vars alone have 1,931,350,025,715,010,000,000 possible combinations. This is the Burger King of YouTube plugins - you can have it your way.

   Some examples:

   • {​ytnc autoplay="1"}http://youtube.com/watch?v=iwGFalTRHDA{/ytnc}

     • Begins playback when the video is loaded. Useful for lazyloaded videos, so the users don't need to press play a second time.

   • {​ytnc enablejsapi="1" origin="www.yourdomain.com"}http://www.youtube.com/watch?v=iwGFalTRHDA&feature=related{/ytnc}
     • Enables the JSAPI, so you can control and monitor the videos with Javascript.
     • This plugin auto-integrates with the RicheyWeb "System - Google Analytics (No Cookies)" plugin when this option is enabled.

• • {​ytnc end="600"}https://​youtube.com/iwGFalTRHDA{/ytnc}
    • Stops the video at 10 minutes.
  • {​ytnc loop="1"}http://​youtu.be/n17B_uFF4cA{/ytnc}
    • Plays the video in a loop.
  • {​ytnc rel="0"}youtube.com/iwGFalTRHDA{/ytnc}
    • Turns off the display of related videos when playback ends.
  • {​ytnc}n17B_uFF4cA{/ytnc}
    • Feeling lazy? Paste just the video id.
  • {​ytnc}http://​www.youtube-nocookie.com/watch?v=t-ZRX8984sc{/ytnc}
    • I tried to identify all URL patterns that YouTube uses....let me know if I missed any.
  • {​ytnc}http://​youtu.be/t-ZRX8984sc{/ytnc}
    • ...even this one

Advanced

Convert URLs

When this option is enabled, and a YouTube URL is used in an HTML anchor, it is automatically embedded. The embed uses the defaults set in the plugin, and overrides them with the query vars present in the URL.

You can prevent a link from being embedded by giving the anchor the CSS class "noytnc". When this class is present, the plugin ignores the tag completely.

<a href="https://youtu.be/AbCdEfG">This link will be converted to an embed</a>

<a class="noytnc" href="https://youtu.be/AbCdEfG">This link will NOT be converted to an embed</a>

LazyLoad

Lazy loading is a method to quickly display something that looks like a video - but is really just a big button. The advantage to lazy loading is that it is much faster than fully loading the video, especially when multiple videos exist on the same page. When a user clicks the big button, the real video is loaded.

Lazy load can be enabled globally in the Advanced tab, or can be used on specific videos using lazyload="1" like this in the plugin tag: {​ytnc lazyload="1"}. Conversely, if you have enabled LazyLoad in defaults, you can turn it off in a plugin tag by setting the value to zero, like this: {​ytnc lazyload="0"}.

LazyLoad can only be enabled globally, or in the {​ytnc} tag. Linked videos can only lazy load if it is enabled globally.

Because of the number of possible query vars, I indicated their presence with "21queryvars"

LazyLoad

Lazy loading is a process where a placeholder image is used instead of the video.  When the placeholder, is clicked - the video is loaded. This feature is very reliable, and greatly reduces page load times, especially with multiple videos.

LazyLoad Thumbnail

Choose the thumbnail quality to use for your lazyloaded videos.  The availability of backgrounds depends on the quality of the video uploaded.  default.jpg will always be available, but will also always look terrible.  A good default is sddefault.jpg - and when you find a video that is missing that thumbnail, override it using the {​ytnc} tag attribute lazyload_thumbnail="1.jpg" (or whatever background you find that works for you).

Overriding Defaults

The parameter hierarchy is this:

Defaults < URL query vars < ytnc tag attributes

For example, If your default autoplay value is Yes (1), and your video URL contains "autoplay=0", then the URL has overridden the default value and the embedded video will not play automatically.

Same scenario as above, but the URL is wrapped with {​ytnc autoplay="1"}...{/ytnc}.  The default is overridden by the URL, but the URL is overridden by the tag.  The video will auto play.

HELP

Please post your questions in the forum, so other users can benefit from the troubleshooting steps used to resolve your problem.