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


All fields except video code are optional.

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


All default settings

Basic throbber.gifkRGXcDJzVyU25040px010iframe

Iframe version

Basic throbber.gifkRGXcDJzVyU25040px010iframe

Flash version

Basic throbber.gifkRGXcDJzVyU25035px010flash

Start time

Basic throbber.gifkRGXcDJzVyU400300px12010iframe

Lightweight mode

Lightweight mode on

Basic throbber.gifkRGXcDJzVyU25040px011iframe

Lightweight mode off

Basic throbber.gifkRGXcDJzVyU25040px010iframe

Lightweight mode on (flash - no effect)

Basic throbber.gifkRGXcDJzVyU25035px010flash

Lightweight mode off (flash)

Basic throbber.gifkRGXcDJzVyU25035px010flash

Lightweight mode on

Basic throbber.gifkRGXcDJzVyU400300px011iframe

Lightweight mode off

Basic throbber.gifkRGXcDJzVyU400300px010iframe

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

        color: "red",
        controls: "2",
        modestbranding: "0",
        playsinline: "1",
        showinfo: "0",
        fs: "0",
        jsapi: "1",
        origin: "",
        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';


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>


<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>
foo bar
foo bar

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

Basic throbber.gif<script></script>25035px010flash

Basic throbber.gif

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

When everything is good:

Basic throbber.gifkRGXcDJzVyU300200px6011iframe
Community content is available under CC-BY-SA unless otherwise noted.