FANDOM


This is Kirby Wiki's custom Youtube Player that uses Google's iframe API.

Usage

All fields except video code are optional.

{{YoutubePlayer
 | video code
 | video width in px, default 250
 | video height in px, default 35 for flash player, 40 for iframe
 | start = Start time in seconds. Defaults to 0.
 | showinfo = "0" or "1". Defaults to 1. Sets whether to display video information in the player.
 | version = "iframe" or "flash". Defaults to iframe. Forces either version of player. The flash player cannot use placeholder mode
 | lightweight = "0" or "1". Defaults to 0. When set to 1, the youtube object will not load (at all) until the placeholder is clicked on.
                             This gives better performance, and for soundtrack videos, this avoids showing only a partial thumbnail.
                             When the placeholder IS clicked, then the video initializes with autoplay on, so the user does not have to click again.
}}

Example

All default settings

{{YoutubePlayer|kRGXcDJzVyU}}
Basic throbberkRGXcDJzVyU25040px010iframe


Iframe version

{{YoutubePlayer|kRGXcDJzVyU|version=iframe}}
Basic throbberkRGXcDJzVyU25040px010iframe


Flash version

{{YoutubePlayer|kRGXcDJzVyU|version=flash}}
Basic throbberkRGXcDJzVyU25035px010flash


Start time

{{YoutubePlayer|kRGXcDJzVyU|400|300|start=120}}
Basic throbberkRGXcDJzVyU400300px12010iframe


Lightweight mode

Lightweight mode on

Basic throbberkRGXcDJzVyU25040px011iframe

Lightweight mode off

Basic throbberkRGXcDJzVyU25040px010iframe


Lightweight mode on (flash - no effect)

Basic throbberkRGXcDJzVyU25035px010flash

Lightweight mode off (flash)

Basic throbberkRGXcDJzVyU25035px010flash


Lightweight mode on

Basic throbberkRGXcDJzVyU400300px011iframe

Lightweight mode off

Basic throbberkRGXcDJzVyU400300px010iframe


Technical documentation

Unconfigurable parameters

The API exposes additional parameters, which are not configurable through this template. Autoplay is 0, unless placeholder mode is on, in which case we set it to 1

    var DEFAULT_PLAYER_PARAMS = {
        color: "red",
        controls: "2",
        modestbranding: "0",
        playsinline: "1",
        showinfo: "0",
        fs: "0",
        jsapi: "1",
        origin: "http://kirby.wikia.com",
        rel: "0",
        version: "3",
    };

JavaScript function dependencies

DOM hooks used

    var INSTANCE_HOOK = '.kw-js-ytplayer-hook';
    var TRACKID_HOOK = '.kw-js-ytplayer-trackid';
    var WIDTH_HOOK = '.kw-js-ytplayer-width';
    var HEIGHT_HOOK = '.kw-js-ytplayer-height';
    var START_HOOK = '.kw-js-ytplayer-start';
    var PLAYER_HOOK = '.kw-js-ytplayer-player';
    var ISLIGHTWEIGHT_HOOK = '.kw-js-ytplayer-islightweight';
    var VERSION_HOOK = '.kw-js-ytplayer-version'; // toggle between flash or iframe player
    var BGIMG_HOOK = 'kw-js-ytplayer-bgimg'; // css hook for addClass(). Therefore no '.'
    var SANITIZE_HOOK = '.kw-js-sanitize';

Security

The JavaScript reads in several untrusted values specified through this template to define the right player parameters to initialize the player with. As is currently specified, the JavaScript is hardcoded to read in the text nodes enclosed within DOM nodes labeled with the right classes. These text nodes are then passed through the sanitizer to ensure the end result is either just plaintext or nothing, and then the rest of the script can use these values safely.

Test cases

Passing in an ill-formed template will have no other effect on the page; other correctly-specified videos load (below):

<div class="kw-js-ytplayer-hook">
<span class="kw-js-ytplayer-trackid"></span>
<span class="kw-js-ytplayer-trackid">1235</span>
<span></span>
</div>

1235

<div class="kw-js-ytplayer-hook">
<span class="kw-js-ytplayer-player"><div>foo bar</div></span>
<span class="kw-js-ytplayer-trackid kw-js-sanitize"><div>foo bar</div></span>
<span></span>
</div>
foo bar
foo bar

Passing in an invalid trackId will simply load a video pointing to nowhere

{{YoutubePlayer|<script></script>|version=flash}}
Basic throbber<script></script>25035px010flash


{{YoutubePlayer|<div></div>|version=iframe}}
Basic throbber
25040px010iframe


Passing in a valid trackId as a text node wrapped in HTML will still load the video

{{YoutubePlayer|<div class{{=}}"foo" data-bar{{=}}"bar">kRGXcDJzVyU</div>}}
Basic throbber
kRGXcDJzVyU
25040px010iframe


When everything is good:

{{YoutubePlayer|kRGXcDJzVyU|300|200|version=iframe|lightweight=1|start=60}}
Basic throbberkRGXcDJzVyU300200px6011iframe
Community content is available under CC-BY-SA unless otherwise noted.