From 94ae211ff1ce651a71b37d1e485e84ba83d43c4c Mon Sep 17 00:00:00 2001
From: Karl Podger <karl.podger@primeordinal.com>
Date: Wed, 25 Jan 2017 17:48:09 +0000
Subject: [PATCH 1/3] Port to 2.0

---
 google-youtube.html | 1197 ++++++++++++++++++++-----------------------
 1 file changed, 557 insertions(+), 640 deletions(-)

diff --git a/google-youtube.html b/google-youtube.html
index c44503a..cc3872f 100755
--- a/google-youtube.html
+++ b/google-youtube.html
@@ -7,7 +7,7 @@
 subject to an additional IP rights grant found at https://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-localstorage/iron-localstorage.html">
 <link rel="import" href="../google-apis/google-youtube-api.html">
 
@@ -38,46 +38,46 @@
 @demo
 -->
 <dom-module id="google-youtube">
-  <style>
-    :host {
-      display: block;
-    }
-
-    :host([fluid]) {
-      width: 100%;
-      max-width: 100%;
-      position: relative;
-    }
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
 
-    :host([fluid]) iframe,
-    :host([fluid]) #thumbnail {
-      vertical-align: bottom;
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      width: 100%;
-      height: 100%;
-    }
+      :host([fluid]) {
+        width: 100%;
+        max-width: 100%;
+        position: relative;
+      }
 
-    iframe {
-      @apply(--google-youtube-iframe);
-    }
+      :host([fluid]) iframe,
+      :host([fluid]) #thumbnail {
+        vertical-align: bottom;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+      }
+      
+      iframe {
+        @apply --google-youtube-iframe;
+      }
 
-    #container {
-      max-width: 100%;
-      max-height: 100%;
-      @apply(--google-youtube-container);
-    }
+      #container {
+        max-width: 100%;
+        max-height: 100%;
+        @apply --google-youtube-container;
+      }
 
-    #thumbnail {
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      @apply(--google-youtube-thumbnail);
-    }
-  </style>
+      #thumbnail {
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        @apply --google-youtube-thumbnail;
+      }
+    </style>
 
-  <template>
     <div id="container" style$="{{_computeContainerStyle(width, height)}}">
       <template is="dom-if" if="{{thumbnail}}">
         <img id="thumbnail"
@@ -104,675 +104,592 @@
       <div id="player"></div>
     </div>
   </template>
-</dom-module>
-
-<script>
-  Polymer({
-    is: 'google-youtube',
-    /**
-     * Fired when the YouTube player is fully initialized and ready for use.
-     *
-     * @event google-youtube-ready
-     */
-
-    /**
-     * Fired when the state of the player changes. `e.detail.data` is set to one of
-     * [the documented](https://developers.google.com/youtube/iframe_api_reference#onStateChange)
-     * states.
-     *
-     * @event google-youtube-state-change
-     */
-
-    /**
-     * Fired when playback fails due to an error. `e.detail.data` is set to one of
-     * [the documented](https://developers.google.com/youtube/iframe_api_reference#onError)
-     * error codes.
-     *
-     * @event google-youtube-error
-     */
-
-    properties: {
-      /**
-       * Sets the id of the video to play. Changing this attribute will trigger a call
-       * to load a new video into the player (if `this.autoplay` is set to `1` and `playsupported` is true)
-       * or cue a new video otherwise.
-       *
-       * The underlying YouTube embed will not be added to the page unless this
-       * value is set.
-       *
-       * You can [search for videos programmatically](https://developers.google.com/youtube/v3/docs/search/list)
-       * using the YouTube Data API, or just hardcode known video ids to display on your page.
-       */
-      videoId: {
-        type: String,
-        value: '',
-        observer: '_videoIdChanged'
-      },
+
+  <script>
+    class GoogleYoutube extends Polymer.Element {
+      static get is() { return 'google-youtube'; }
 
       /**
-       * Whether programmatic `<video>.play()` for initial playback is supported in the current browser.
-       *
-       * Most mobile browsers [do not support](https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1) autoplaying or scripted playback of videos.
-       * If you attempt to automatically initiate playback of a `<google-youtube>`, e.g. by calling the `play()` method before
-       * playback has initially begun, the YouTube Player will enter an unrecoverable "stuck" state.
-       * To protect against this, check the value of `playsupported` and don't call `play()` if it is set to `false`.
-       * (You can hide/disable your custom play button, etc.)
+       * Fired when the YouTube player is fully initialized and ready for use.
        *
-       * The `playsupported` value is determined at runtime, by dynamically creating a `<video>` element with an
-       * inlined data source and calling `play()` on it. (Inspired by [Modernizr](https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video/autoplay.js).)
-       *
-       * If you would rather not incur the minimal overhead involved in going through this process, you can explicitly set
-       * `playsupported` to `true` or `false` when initializing `<google-youtube>`. This is only recommended if you know that
-       * your web app will never (or only) be used on mobile browsers.
+       * @event google-youtube-ready
        */
-      playsupported: {
-        type: Boolean,
-        value: null,
-        notify: true
-      },
 
       /**
-       * "1" if video should start automatically
-       */
-      autoplay: {
-        type: Number,
-        value: 0
-      },
-      /**
-       * Whether playback has started.
-       *
-       * This defaults to `false` and is set to `true` once the first 'playing' event is fired by
-       * the underlying YouTube Player API.
+       * Fired when the state of the player changes. `e.detail.data` is set to one of
+       * [the documented](https://developers.google.com/youtube/iframe_api_reference#onStateChange)
+       * states.
        *
-       * Once set to `true`, it will remain that way indefinitely.
-       * Paused/buffering/ended events won't cause `playbackstarted` to reset to `false`.
-       * Nor will loading a new video into the player.
+       * @event google-youtube-state-change
+       * @param {Object} e Event parameters.
        */
-      playbackstarted: {
-        type: Boolean,
-        value: false,
-        notify: true
-      },
 
-      /**
-       * Sets the height of the player on the page.
-       * Accepts anything valid for a CSS measurement, e.g. '200px' or '50%'.
-       * If the unit of measurement is left off, 'px' is assumed.
-       */
-      height: {
-        type: String,
-        value: '270px'
-      },
+      constructor() {
+        super();
+      }
 
-      /**
-       * Sets the width of the player on the page.
-       * Accepts anything valid for a CSS measurement, e.g. '200px' or '50%'.
-       * If the unit of measurement is left off, 'px' is assumed.
-       */
-      width: {
-        type: String,
-        value:'480px'
-      },
+      static get config() {
+        return {
+          /**
+           * Fired when playback fails due to an error. `e.detail.data` is set to one of
+           * [the documented](https://developers.google.com/youtube/iframe_api_reference#onError)
+           * error codes.
+           *
+           * @event google-youtube-error
+           * @param {Object} e Event parameters.
+           */
+
+          properties: {
+          /**
+           * Sets the id of the video to play. Changing this attribute will trigger a call
+           * to load a new video into the player (if `this.autoplay` is set to `1` and `playsupported` is true)
+           * or cue a new video otherwise.
+           *
+           * The underlying YouTube embed will not be added to the page unless this
+           * value is set.
+           *
+           * You can [search for videos programmatically](https://developers.google.com/youtube/v3/docs/search/list)
+           * using the YouTube Data API, or just hardcode known video ids to display on your page.
+           */
+            videoId: {
+              type: String,
+              value: '',
+              observer: '_videoIdChanged'
+            },
+
+            /**
+             * Whether programmatic `<video>.play()` for initial playback is supported in the current browser.
+             *
+             * Most mobile browsers [do not support](https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1) autoplaying or scripted playback of videos.
+             * If you attempt to automatically initiate playback of a `<google-youtube>`, e.g. by calling the `play()` method before
+             * playback has initially begun, the YouTube Player will enter an unrecoverable "stuck" state.
+             * To protect against this, check the value of `playsupported` and don't call `play()` if it is set to `false`.
+             * (You can hide/disable your custom play button, etc.)
+             *
+             * The `playsupported` value is determined at runtime, by dynamically creating a `<video>` element with an
+             * inlined data source and calling `play()` on it. (Inspired by [Modernizr](https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video/autoplay.js).)
+             *
+             * If you would rather not incur the minimal overhead involved in going through this process, you can explicitly set
+             * `playsupported` to `true` or `false` when initializing `<google-youtube>`. This is only recommended if you know that
+             * your web app will never (or only) be used on mobile browsers.
+             */
+            playsupported: {
+              type: Boolean,
+              value: null,
+              notify: true
+            },
+
+            /**
+             * "1" if video should start automatically
+             */
+            autoplay: {
+              type: Number,
+              value: 0
+            },
+            /**
+             * Whether playback has started.
+             *
+             * This defaults to `false` and is set to `true` once the first 'playing' event is fired by
+             * the underlying YouTube Player API.
+             *
+             * Once set to `true`, it will remain that way indefinitely.
+             * Paused/buffering/ended events won't cause `playbackstarted` to reset to `false`.
+             * Nor will loading a new video into the player.
+             */
+            playbackstarted: {
+              type: Boolean,
+              value: false,
+              notify: true
+            },
+
+            /**
+             * Sets the height of the player on the page.
+             * Accepts anything valid for a CSS measurement, e.g. '200px' or '50%'.
+             * If the unit of measurement is left off, 'px' is assumed.
+             */
+            height: {
+              type: String,
+              value: '270px'
+            },
+
+            /**
+             * Sets the width of the player on the page.
+             * Accepts anything valid for a CSS measurement, e.g. '200px' or '50%'.
+             * If the unit of measurement is left off, 'px' is assumed.
+             */
+            width: {
+              type: String,
+              value:'480px'
+            },
+
+            /**
+             * Exposes the current player state.
+             * Using this attribute is an alternative to listening to `google-youtube-state-change` events,
+             * and can simplify the logic in templates with conditional binding.
+             *
+             * The [possible values](https://developers.google.com/youtube/iframe_api_reference#onStateChange):
+             *   - -1 (unstarted)
+             *   - 0 (ended)
+             *   - 1 (playing)
+             *   - 2 (paused)
+             *   - 3 (buffering)
+             *   - 5 (video cued)
+             */
+            state: {
+              type: Number,
+              value: -1,
+              notify: true
+            },
+
+            /**
+             * Exposes the current playback time, in seconds.
+             *
+             * You can divide this value by the `duration` to determine the playback percentage.
+             */
+            currenttime: {
+              type: Number,
+              value: 0,
+              notify: true
+            },
+
+            /**
+             * Exposes the video duration, in seconds.
+             *
+             * You can divide the `currenttime` to determine the playback percentage.
+             *
+             * @attribute duration
+             * @type number
+             */
+            duration: {
+              type: Number,
+              value: 1, // To avoid divide-by-zero errors if used before video is cued.
+              notify: true
+            },
+
+            /**
+             * Exposes the current playback time, formatted as a (HH:)MM:SS string.
+             */
+            currenttimeformatted: {
+              type: String,
+              value: '0:00',
+              notify: true
+            },
+
+            /**
+             * Exposes the video duration, formatted as a (HH:)MM:SS string.
+             */
+            durationformatted: {
+              type: String,
+              value: '0:00', // To avoid divide-by-zero errors if used before video is cued.
+              notify: true
+            },
+
+            /**
+             * The fraction of the bytes that have been loaded for the current video, in the range [0-1].
+             */
+            fractionloaded: {
+              type: Number,
+              value: 0,
+              notify: true
+            },
+
+            /**
+             * A shorthand to enable a set of player attributes that, used together, simulate a "chromeless" YouTube player.
+             *
+             * Equivalent to setting the following attributes:
+             * - `controls="0"`
+             * - `modestbranding="1"`
+             * - `showinfo="0"`
+             * - `iv_load_policy="3"`
+             * - `rel="0"`
+             *
+             * The "chromeless" player has minimal YouTube branding in cued state, and the native controls
+             * will be disabled during playback. Creating your own custom play/pause/etc. controls is recommended.
+             */
+            chromeless: {
+              type: Boolean,
+              value: false
+            },
+            /**
+             * The URL of an image to use as a custom thumbnail.
+             *
+             * This is optional; if not provided, the standard YouTube embed (which uses the thumbnail associated
+             * with the video on YouTube) will be used.
+             *
+             * If `thumbnail` is set, than an `<img>` containing the thumbnail will be used in lieu of the actual
+             * YouTube embed. When the thumbnail is clicked, the `<img>` is swapped out for the actual YouTube embed,
+             * which will have [`autoplay=1`](https://developers.google.com/youtube/player_parameters#autoplay) set by default (in additional to any other player parameters specified on this element).
+             *
+             * Please note that `autoplay=1` won't actually autoplay videos on mobile browsers, so two taps will be required
+             * to play the video there. Also, on desktop browsers, setting `autoplay=1` will prevent the playback
+             * from [incrementing the view count](https://support.google.com/youtube/answer/1714329) for the video.
+             */
+            thumbnail: {
+              type: String,
+              value: ''
+            },
+
+            /**
+             * If `fluid` is set, then the player will set its width to 100% to fill
+             * the parent container, while adding `padding-top` to preserve the
+             * aspect ratio provided by `width` and `height`. If `width` and `height`
+             * have not been set, the player will fall back to a 16:9 aspect ratio.
+             * This is useful for responsive designs where you don't want to
+             * introduce letterboxing on your video.
+             */
+            fluid: {
+              type: Boolean,
+              value: false
+            }
+          }
+        }
+      }
 
-      /**
-       * Exposes the current player state.
-       * Using this attribute is an alternative to listening to `google-youtube-state-change` events,
-       * and can simplify the logic in templates with conditional binding.
-       *
-       * The [possible values](https://developers.google.com/youtube/iframe_api_reference#onStateChange):
-       *   - -1 (unstarted)
-       *   - 0 (ended)
-       *   - 1 (playing)
-       *   - 2 (paused)
-       *   - 3 (buffering)
-       *   - 5 (video cued)
-       */
-      state: {
-        type: Number,
-        value: -1,
-        notify: true
-      },
+      _computeContainerStyle(width, height) {
+        return 'width:' + width + '; height:' + height;
+      }
+
+      _useExistingPlaySupportedValue() {
+        this.playsupported = this._playsupportedLocalStorage;
+      }
 
       /**
-       * Exposes the current playback time, in seconds.
+       * Detects whether programmatic <video>.play() is supported in the current browser.
        *
-       * You can divide this value by the `duration` to determine the playback percentage.
+       * This is triggered via on-ironlocalstorage-load-empty. The logic is:
+       * - If playsupported is explicitly set to true or false on the element, use that.
+       * - Otherwise, if there's a cached value in localStorage, use that.
+       * - Otherwise, create a hidden <video> element and call play() on it:
+       *   - If playback starts, playsupported is true.
+       *   - If playback doesn't start (within 500ms), playsupported is false.
+       *   - Whatever happens, cache the result in localStorage.
        */
-      currenttime: {
-        type: Number,
-        value: 0,
-        notify: true
-      },
+      _determinePlaySupported() {
+        // If playsupported isn't already being overridden by the page using this component,
+        // then attempt to determine if it's supported.
+        // This is deliberately checking with ==, to match either undefined or null.
+        if (this.playsupported == null) {
+          // Run a new playback test.
+          var timeout;
+          var videoElement = document.createElement('video');
+
+          if ('play' in videoElement) {
+            videoElement.id = 'playtest';
+            // Some browsers will refuse to play videos with 'display: none' set,
+            // so position the video well offscreen instead.
+            // Modify the .style property directly instead of using CSS to work around polyfill
+            // issues; see https://github.com/GoogleWebComponents/google-youtube/issues/49
+            videoElement.style.position = 'absolute';
+            videoElement.style.top = '-9999px';
+            videoElement.style.left = '-9999px';
+
+            var mp4Source = document.createElement('source');
+            mp4Source.src = "data:video/mp4;base64,AAAAFGZ0eXBNU05WAAACAE1TTlYAAAOUbW9vdgAAAGxtdmhkAAAAAM9ghv7PYIb+AAACWAAACu8AAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAnh0cmFrAAAAXHRraGQAAAAHz2CG/s9ghv4AAAABAAAAAAAACu8AAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAFAAAAA4AAAAAAHgbWRpYQAAACBtZGhkAAAAAM9ghv7PYIb+AAALuAAANq8AAAAAAAAAIWhkbHIAAAAAbWhscnZpZGVBVlMgAAAAAAABAB4AAAABl21pbmYAAAAUdm1oZAAAAAAAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAVdzdGJsAAAAp3N0c2QAAAAAAAAAAQAAAJdhdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAFAAOABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAEmNvbHJuY2xjAAEAAQABAAAAL2F2Y0MBTUAz/+EAGGdNQDOadCk/LgIgAAADACAAAAMA0eMGVAEABGjuPIAAAAAYc3R0cwAAAAAAAAABAAAADgAAA+gAAAAUc3RzcwAAAAAAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAADgAAAAEAAABMc3RzegAAAAAAAAAAAAAADgAAAE8AAAAOAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA4AAAAOAAAAFHN0Y28AAAAAAAAAAQAAA7AAAAA0dXVpZFVTTVQh0k/Ou4hpXPrJx0AAAAAcTVREVAABABIAAAAKVcQAAAAAAAEAAAAAAAAAqHV1aWRVU01UIdJPzruIaVz6ycdAAAAAkE1URFQABAAMAAAAC1XEAAACHAAeAAAABBXHAAEAQQBWAFMAIABNAGUAZABpAGEAAAAqAAAAASoOAAEAZABlAHQAZQBjAHQAXwBhAHUAdABvAHAAbABhAHkAAAAyAAAAA1XEAAEAMgAwADAANQBtAGUALwAwADcALwAwADYAMAA2ACAAMwA6ADUAOgAwAAABA21kYXQAAAAYZ01AM5p0KT8uAiAAAAMAIAAAAwDR4wZUAAAABGjuPIAAAAAnZYiAIAAR//eBLT+oL1eA2Nlb/edvwWZflzEVLlhlXtJvSAEGRA3ZAAAACkGaAQCyJ/8AFBAAAAAJQZoCATP/AOmBAAAACUGaAwGz/wDpgAAAAAlBmgQCM/8A6YEAAAAJQZoFArP/AOmBAAAACUGaBgMz/wDpgQAAAAlBmgcDs/8A6YEAAAAJQZoIBDP/AOmAAAAACUGaCQSz/wDpgAAAAAlBmgoFM/8A6YEAAAAJQZoLBbP/AOmAAAAACkGaDAYyJ/8AFBAAAAAKQZoNBrIv/4cMeQ==";
+            videoElement.appendChild(mp4Source);
+
+            var webmSource = document.createElement('source');
+            webmSource.src = "data:video/webm;base64,GkXfo49CgoR3ZWJtQoeBAUKFgQEYU4BnAQAAAAAAF60RTZt0vE27jFOrhBVJqWZTrIIQA027jFOrhBZUrmtTrIIQbE27jFOrhBFNm3RTrIIXmU27jFOrhBxTu2tTrIIWs+xPvwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFUmpZuQq17GDD0JATYCjbGliZWJtbCB2MC43LjcgKyBsaWJtYXRyb3NrYSB2MC44LjFXQY9BVlNNYXRyb3NrYUZpbGVEiYRFnEAARGGIBc2Lz1QNtgBzpJCy3XZ0KNuKNZS4+fDpFxzUFlSua9iu1teBAXPFhL4G+bmDgQG5gQGIgQFVqoEAnIEAbeeBASMxT4Q/gAAAVe6BAIaFVl9WUDiqgQEj44OEE95DVSK1nIN1bmTgkbCBULqBPJqBAFSwgVBUuoE87EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB9DtnVB4eeBAKC4obaBAAAAkAMAnQEqUAA8AABHCIWFiIWEiAICAAamYnoOC6cfJa8f5Zvda4D+/7YOf//nNefQYACgnKGWgQFNANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQKbANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQPoANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQU1ANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQaDANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQfQANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQkdANEBAAEQEBRgAGFgv9AAIiGAAPuC/rOgnKGWgQprANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQu4ANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQ0FANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQ5TANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQ+gANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgRDtANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgRI7ANEBAAEQEAAYABhYL/QACIhgAPuC/rIcU7trQOC7jLOBALeH94EB8YIUzLuNs4IBTbeH94EB8YIUzLuNs4ICm7eH94EB8YIUzLuNs4ID6LeH94EB8YIUzLuNs4IFNbeH94EB8YIUzLuNs4IGg7eH94EB8YIUzLuNs4IH0LeH94EB8YIUzLuNs4IJHbeH94EB8YIUzLuNs4IKa7eH94EB8YIUzLuNs4ILuLeH94EB8YIUzLuNs4INBbeH94EB8YIUzLuNs4IOU7eH94EB8YIUzLuNs4IPoLeH94EB8YIUzLuNs4IQ7beH94EB8YIUzLuNs4ISO7eH94EB8YIUzBFNm3SPTbuMU6uEH0O2dVOsghTM";
+            videoElement.appendChild(webmSource);
+
+            document.body.appendChild(videoElement);
+
+            this.async(() => {
+              // Ideally, we'll get a 'playing' event if we're on a browser that supports
+              // programmatic play().
+              videoElement.onplaying = function(e) {
+                clearTimeout(timeout);
+
+                this.playsupported = (e && e.type === 'playing') || videoElement.currentTime !== 0;
+                this._playsupportedLocalStorage = this.playsupported;
+
+                videoElement.onplaying = null;
+
+                document.body.removeChild(videoElement);
+              }
+
+              // If we haven't received a 'playing' event within 500ms, then we're most likely on a browser that doesn't
+              // support programmatic plays. Do a final check after 500ms and set this.playsupported at that point.
+              timeout = setTimeout(videoElement.onplaying, 500);
+
+              // Try to initiate playback...
+              videoElement.play();
+            });
+          } else {
+            // If there's no play() method then we know that it's not supported.
+            this.playsupported = false;
+            this._playsupportedLocalStorage = false;
+          }
+        }
+      }
 
       /**
-       * Exposes the video duration, in seconds.
+       * Sets fluid width/height.
        *
-       * You can divide the `currenttime` to determine the playback percentage.
+       * If the fluid attribute is set, the aspect ratio of the video will
+       * be inferred (if set in pixels), or assumed to be 16:9. The element
+       * will give itself enough top padding to force the player to use the
+       * correct aspect ratio, even as the screen size changes.
        *
-       * @attribute duration
-       * @type number
        */
-      duration: {
-        type: Number,
-        value: 1, // To avoid divide-by-zero errors if used before video is cued.
-        notify: true
-      },
 
-      /**
-       * Exposes the current playback time, formatted as a (HH:)MM:SS string.
-       */
-      currenttimeformatted: {
-        type: String,
-        value: '0:00',
-        notify: true
-      },
+      connectedCallback() {
+        super.connectedCallback();
 
-      /**
-       * Exposes the video duration, formatted as a (HH:)MM:SS string.
-       */
-      durationformatted: {
-        type: String,
-        value: '0:00', // To avoid divide-by-zero errors if used before video is cued.
-        notify: true
-      },
+        this._player = null;
+
+        this.__updatePlaybackStatsInterval = null;
+
+        this._pendingVideoId = '';
+
+        if (this.hasAttribute('fluid')) {
+          var ratio = parseInt(this.height, 10) / parseInt(this.width, 10);
+          if (isNaN(ratio)) {
+            ratio = 9/16;
+          }
+          ratio *= 100;
+          this.width = '100%';
+          this.height = 'auto';
+          this.$.container.style['padding-top'] = ratio + '%';
+        }
+      }
 
       /**
-       * The fraction of the bytes that have been loaded for the current video, in the range [0-1].
+       * Clean up the underlying Player `<iframe>` when we're removed from the DOM.
        */
-      fractionloaded: {
-        type: Number,
-        value: 0,
-        notify: true
-      },
+      disconnectedCallback () {
+        if (this._player) {
+          this._player.destroy();
+        }
+      }
 
       /**
-       * A shorthand to enable a set of player attributes that, used together, simulate a "chromeless" YouTube player.
+       * Plays the current video.
+       *
+       * Note that on certain mobile browsers, playback
+       * [can't be initiated programmatically](https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations).
        *
-       * Equivalent to setting the following attributes:
-       * - `controls="0"`
-       * - `modestbranding="1"`
-       * - `showinfo="0"`
-       * - `iv_load_policy="3"`
-       * - `rel="0"`
+       * If `this.playsupported` is not `true`, calling `play()` will have no effect.
        *
-       * The "chromeless" player has minimal YouTube branding in cued state, and the native controls
-       * will be disabled during playback. Creating your own custom play/pause/etc. controls is recommended.
+       * @method play
        */
-      chromeless: {
-        type: Boolean,
-        value: false
-      },
+      play() {
+        if (this._player && this._player.playVideo && this.playsupported) {
+          this._player.playVideo();
+        }
+      }
+
       /**
-       * The URL of an image to use as a custom thumbnail.
-       *
-       * This is optional; if not provided, the standard YouTube embed (which uses the thumbnail associated
-       * with the video on YouTube) will be used.
+       * Modifies the volume of the current video.
        *
-       * If `thumbnail` is set, than an `<img>` containing the thumbnail will be used in lieu of the actual
-       * YouTube embed. When the thumbnail is clicked, the `<img>` is swapped out for the actual YouTube embed,
-       * which will have [`autoplay=1`](https://developers.google.com/youtube/player_parameters#autoplay) set by default (in additional to any other player parameters specified on this element).
+       * Developers should take care not to break expected user experience by programmatically
+       * modifying the volume on mobile browsers.
+       * Note that the YouTube player, in addition, does not display volume controls in a
+       * mobile environment.
        *
-       * Please note that `autoplay=1` won't actually autoplay videos on mobile browsers, so two taps will be required
-       * to play the video there. Also, on desktop browsers, setting `autoplay=1` will prevent the playback
-       * from [incrementing the view count](https://support.google.com/youtube/answer/1714329) for the video.
+       * @method setVolume
+       * @param {number} volume The new volume, an integer between 0 (muted) and 100 (loudest).
        */
-      thumbnail: {
-        type: String,
-        value: ''
-      },
+      setVolume(volume) {
+        if (this._player && this._player.setVolume) {
+          this._player.setVolume(volume);
+        }
+      }
 
       /**
-       * If `fluid` is set, then the player will set its width to 100% to fill
-       * the parent container, while adding `padding-top` to preserve the
-       * aspect ratio provided by `width` and `height`. If `width` and `height`
-       * have not been set, the player will fall back to a 16:9 aspect ratio.
-       * This is useful for responsive designs where you don't want to
-       * introduce letterboxing on your video.
+       * Mutes the current video.
+       *
+       * Developers should take care not to break expected user experience by programmatically
+       * modifying the volume on mobile browsers.
+       * Note that the YouTube player, in addition, does not display volume controls in a
+       * mobile environment.
+       *
+       * @method mute
        */
-      fluid: {
-        type: Boolean,
-        value: false
-      },
+      mute() {
+        if (this._player && this._player.mute) {
+          this._player.mute();
+        }
+      }
 
       /**
-       * Returns the player's current volume, an integer between 0 and 100.
-       * Note that `getVolume()` will return the volume even if the player is muted.
+       * Unmutes the current video.
+       *
+       * Developers should take care not to break expected user experience by programmatically
+       * modifying the volume on mobile browsers.
+       * Note that the YouTube player, in addition, does not display volume controls in a
+       * mobile environment.
+       *
+       * @method unMute
        */
-      volume: {
-        type: Number,
-        value: 100,
-        notify: true
-      },
+      unMute() {
+        if (this._player && this._player.unMute) {
+          this._player.unMute();
+        }
+      }
 
       /**
-       * This function retrieves the playback rate of the currently playing video.
-       * The default playback rate is 1, which indicates that the video is playing at normal speed.
-       * Playback rates may include values like `0.25`, `0.5`, `1`, `1.5`, and `2`.
+       * Pauses the current video.
+       *
+       * @method pause
        */
-      playbackrate: {
-        type: Number,
-        value: 1,
-        notify: true
-      },
+      pause() {
+        if (this._player && this._player.pauseVideo) {
+          this._player.pauseVideo();
+        }
+      }
 
       /**
-       * This function retrieves the actual video quality of the current video.
-       * Possible return values are `highres`, `hd1080`, `hd720`, `large`, `medium` and `small`.
-       * It will also return `undefined` if there is no current video.
+       * Skips ahead (or back) to the specified number of seconds.
+       *
+       * @method seekTo
+       * @param {number} seconds Number of seconds to seek to.
        */
-      playbackquality: {
-        type: String,
-        value: '',
-        notify: true
-      }
-
-    },
-
-    _computeContainerStyle: function(width, height) {
-      return 'width:' + width + '; height:' + height;
-    },
-
-    _useExistingPlaySupportedValue: function() {
-      this.playsupported = this._playsupportedLocalStorage;
-    },
-
-    /**
-     * Detects whether programmatic <video>.play() is supported in the current browser.
-     *
-     * This is triggered via on-ironlocalstorage-load-empty. The logic is:
-     * - If playsupported is explicitly set to true or false on the element, use that.
-     * - Otherwise, if there's a cached value in localStorage, use that.
-     * - Otherwise, create a hidden <video> element and call play() on it:
-     *   - If playback starts, playsupported is true.
-     *   - If playback doesn't start (within 500ms), playsupported is false.
-     *   - Whatever happens, cache the result in localStorage.
-     */
-    _determinePlaySupported: function() {
-      // If playsupported isn't already being overridden by the page using this component,
-      // then attempt to determine if it's supported.
-      // This is deliberately checking with ==, to match either undefined or null.
-      if (this.playsupported == null) {
-        // Run a new playback test.
-        var timeout;
-        var videoElement = document.createElement('video');
-
-        if ('play' in videoElement) {
-          videoElement.id = 'playtest';
-          // Some browsers will refuse to play videos with 'display: none' set,
-          // so position the video well offscreen instead.
-          // Modify the .style property directly instead of using CSS to work around polyfill
-          // issues; see https://github.com/GoogleWebComponents/google-youtube/issues/49
-          videoElement.style.position = 'absolute';
-          videoElement.style.top = '-9999px';
-          videoElement.style.left = '-9999px';
-
-          var mp4Source = document.createElement('source');
-          mp4Source.src = "data:video/mp4;base64,AAAAFGZ0eXBNU05WAAACAE1TTlYAAAOUbW9vdgAAAGxtdmhkAAAAAM9ghv7PYIb+AAACWAAACu8AAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAnh0cmFrAAAAXHRraGQAAAAHz2CG/s9ghv4AAAABAAAAAAAACu8AAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAFAAAAA4AAAAAAHgbWRpYQAAACBtZGhkAAAAAM9ghv7PYIb+AAALuAAANq8AAAAAAAAAIWhkbHIAAAAAbWhscnZpZGVBVlMgAAAAAAABAB4AAAABl21pbmYAAAAUdm1oZAAAAAAAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAVdzdGJsAAAAp3N0c2QAAAAAAAAAAQAAAJdhdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAFAAOABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAEmNvbHJuY2xjAAEAAQABAAAAL2F2Y0MBTUAz/+EAGGdNQDOadCk/LgIgAAADACAAAAMA0eMGVAEABGjuPIAAAAAYc3R0cwAAAAAAAAABAAAADgAAA+gAAAAUc3RzcwAAAAAAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAADgAAAAEAAABMc3RzegAAAAAAAAAAAAAADgAAAE8AAAAOAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA4AAAAOAAAAFHN0Y28AAAAAAAAAAQAAA7AAAAA0dXVpZFVTTVQh0k/Ou4hpXPrJx0AAAAAcTVREVAABABIAAAAKVcQAAAAAAAEAAAAAAAAAqHV1aWRVU01UIdJPzruIaVz6ycdAAAAAkE1URFQABAAMAAAAC1XEAAACHAAeAAAABBXHAAEAQQBWAFMAIABNAGUAZABpAGEAAAAqAAAAASoOAAEAZABlAHQAZQBjAHQAXwBhAHUAdABvAHAAbABhAHkAAAAyAAAAA1XEAAEAMgAwADAANQBtAGUALwAwADcALwAwADYAMAA2ACAAMwA6ADUAOgAwAAABA21kYXQAAAAYZ01AM5p0KT8uAiAAAAMAIAAAAwDR4wZUAAAABGjuPIAAAAAnZYiAIAAR//eBLT+oL1eA2Nlb/edvwWZflzEVLlhlXtJvSAEGRA3ZAAAACkGaAQCyJ/8AFBAAAAAJQZoCATP/AOmBAAAACUGaAwGz/wDpgAAAAAlBmgQCM/8A6YEAAAAJQZoFArP/AOmBAAAACUGaBgMz/wDpgQAAAAlBmgcDs/8A6YEAAAAJQZoIBDP/AOmAAAAACUGaCQSz/wDpgAAAAAlBmgoFM/8A6YEAAAAJQZoLBbP/AOmAAAAACkGaDAYyJ/8AFBAAAAAKQZoNBrIv/4cMeQ==";
-          videoElement.appendChild(mp4Source);
-
-          var webmSource = document.createElement('source');
-          webmSource.src = "data:video/webm;base64,GkXfo49CgoR3ZWJtQoeBAUKFgQEYU4BnAQAAAAAAF60RTZt0vE27jFOrhBVJqWZTrIIQA027jFOrhBZUrmtTrIIQbE27jFOrhBFNm3RTrIIXmU27jFOrhBxTu2tTrIIWs+xPvwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFUmpZuQq17GDD0JATYCjbGliZWJtbCB2MC43LjcgKyBsaWJtYXRyb3NrYSB2MC44LjFXQY9BVlNNYXRyb3NrYUZpbGVEiYRFnEAARGGIBc2Lz1QNtgBzpJCy3XZ0KNuKNZS4+fDpFxzUFlSua9iu1teBAXPFhL4G+bmDgQG5gQGIgQFVqoEAnIEAbeeBASMxT4Q/gAAAVe6BAIaFVl9WUDiqgQEj44OEE95DVSK1nIN1bmTgkbCBULqBPJqBAFSwgVBUuoE87EQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB9DtnVB4eeBAKC4obaBAAAAkAMAnQEqUAA8AABHCIWFiIWEiAICAAamYnoOC6cfJa8f5Zvda4D+/7YOf//nNefQYACgnKGWgQFNANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQKbANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQPoANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQU1ANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQaDANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQfQANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQkdANEBAAEQEBRgAGFgv9AAIiGAAPuC/rOgnKGWgQprANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQu4ANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQ0FANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQ5TANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQ+gANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgRDtANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgRI7ANEBAAEQEAAYABhYL/QACIhgAPuC/rIcU7trQOC7jLOBALeH94EB8YIUzLuNs4IBTbeH94EB8YIUzLuNs4ICm7eH94EB8YIUzLuNs4ID6LeH94EB8YIUzLuNs4IFNbeH94EB8YIUzLuNs4IGg7eH94EB8YIUzLuNs4IH0LeH94EB8YIUzLuNs4IJHbeH94EB8YIUzLuNs4IKa7eH94EB8YIUzLuNs4ILuLeH94EB8YIUzLuNs4INBbeH94EB8YIUzLuNs4IOU7eH94EB8YIUzLuNs4IPoLeH94EB8YIUzLuNs4IQ7beH94EB8YIUzLuNs4ISO7eH94EB8YIUzBFNm3SPTbuMU6uEH0O2dVOsghTM";
-          videoElement.appendChild(webmSource);
-
-          document.body.appendChild(videoElement);
-
+      seekTo(seconds) {
+        if (this._player && this._player.seekTo) {
+          this._player.seekTo(seconds, true);
+
+          // Explicitly call _updatePlaybackStats() to ensure that the new playback info is
+          // reflected in the bound attributes.
+          // The 100ms delay is somewhat arbitrary, but the YouTube player does need time to
+          // update its internal state following the call to player.seekTo().
           this.async(function() {
-            // Ideally, we'll get a 'playing' event if we're on a browser that supports
-            // programmatic play().
-            videoElement.onplaying = function(e) {
-              clearTimeout(timeout);
-
-              this.playsupported = (e && e.type === 'playing') || videoElement.currentTime !== 0;
-              this._playsupportedLocalStorage = this.playsupported;
-
-              videoElement.onplaying = null;
-
-              document.body.removeChild(videoElement);
-            }.bind(this);
+            this._updatePlaybackStats();
+          }, null, 100);
+        }
+      }
 
-            // If we haven't received a 'playing' event within 500ms, then we're most likely on a browser that doesn't
-            // support programmatic plays. Do a final check after 500ms and set this.playsupported at that point.
-            timeout = setTimeout(videoElement.onplaying, 500);
+      _videoIdChanged() {
+        this.currenttime = 0;
+        this.currenttimeformatted = this._toHHMMSS(0);
+        this.fractionloaded = 0;
+        this.duration = 1;
+        this.durationformatted = this._toHHMMSS(0);
 
-            // Try to initiate playback...
-            videoElement.play();
-          });
+        if (!this._player || !this._player.cueVideoById) {
+          this._pendingVideoId = this.videoId;
         } else {
-          // If there's no play() method then we know that it's not supported.
-          this.playsupported = false;
-          this._playsupportedLocalStorage = false;
+          // Figure out whether we should cue or load (which will autoplay) the next video.
+          if (this.playsupported && this.attributes['autoplay'] && this.attributes['autoplay'].value == '1') {
+            this._player.loadVideoById(this.videoId);
+          } else {
+            this._player.cueVideoById(this.videoId);
+          }
         }
       }
-    },
-
-    /**
-     * Sets fluid width/height.
-     *
-     * If the fluid attribute is set, the aspect ratio of the video will
-     * be inferred (if set in pixels), or assumed to be 16:9. The element
-     * will give itself enough top padding to force the player to use the
-     * correct aspect ratio, even as the screen size changes.
-     *
-     */
-    ready: function() {
-      if (this.hasAttribute('fluid')) {
-        var ratio = parseInt(this.height, 10) / parseInt(this.width, 10);
-        if (isNaN(ratio)) {
-          ratio = 9/16;
+
+      _apiLoad() {
+        // Establish some defaults. Attributes set on the google-youtube element
+        // can override defaults, or specify additional player parameters. See
+        // https://developers.google.com/youtube/player_parameters
+        var playerVars = {
+          playsinline: 1,
+          controls: 2,
+          autohide: 1,
+          // This will (intentionally) be overwritten if this.attributes['autoplay'] is set.
+          autoplay: this.autoplay
+        };
+
+        if (this.chromeless) {
+          playerVars.controls = 0;
+          playerVars.modestbranding = 1;
+          playerVars.showinfo = 0;
+          // Disable annotations.
+          playerVars.iv_load_policy = 3;
+          // Disable related videos on the end screen.
+          playerVars.rel = 0;
         }
-        ratio *= 100;
-        this.width = '100%';
-        this.height = 'auto';
-        this.$.container.style['padding-top'] = ratio + '%';
-      }
-    },
-
-    /**
-     * Clean up the underlying Player `<iframe>` when we're removed from the DOM.
-     */
-    detached: function() {
-      if (this._player) {
-        this._player.destroy();
-      }
-    },
-
-    /**
-     * Plays the current video.
-     *
-     * Note that on certain mobile browsers, playback
-     * [can't be initiated programmatically](https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations).
-     *
-     * If `this.playsupported` is not `true`, calling `play()` will have no effect.
-     *
-     * @method play
-     */
-    play: function() {
-      if (this._player && this._player.playVideo && this.playsupported) {
-        this._player.playVideo();
-      }
-    },
-
-    /**
-     * Modifies the volume of the current video.
-     *
-     * Developers should take care not to break expected user experience by programmatically
-     * modifying the volume on mobile browsers.
-     * Note that the YouTube player, in addition, does not display volume controls in a
-     * mobile environment.
-     *
-     * @method setVolume
-     * @param {number} volume The new volume, an integer between 0 (muted) and 100 (loudest).
-     */
-    setVolume: function(volume) {
-      if (this._player && this._player.setVolume) {
-        this._player.setVolume(volume);
-      }
-    },
-
-    /**
-     * Mutes the current video.
-     *
-     * Developers should take care not to break expected user experience by programmatically
-     * modifying the volume on mobile browsers.
-     * Note that the YouTube player, in addition, does not display volume controls in a
-     * mobile environment.
-     *
-     * @method mute
-     */
-    mute: function() {
-      if (this._player && this._player.mute) {
-        this._player.mute();
-      }
-    },
-
-    /**
-     * Unmutes the current video.
-     *
-     * Developers should take care not to break expected user experience by programmatically
-     * modifying the volume on mobile browsers.
-     * Note that the YouTube player, in addition, does not display volume controls in a
-     * mobile environment.
-     *
-     * @method unMute
-     */
-    unMute: function() {
-      if (this._player && this._player.unMute) {
-        this._player.unMute();
-      }
-    },
-
-    /**
-     * Pauses the current video.
-     *
-     * @method pause
-     */
-    pause: function() {
-      if (this._player && this._player.pauseVideo) {
-        this._player.pauseVideo();
-      }
-    },
-
-    /**
-     * Skips ahead (or back) to the specified number of seconds.
-     *
-     * @method seekTo
-     * @param {number} seconds Number of seconds to seek to.
-     */
-    seekTo: function(seconds) {
-      if (this._player && this._player.seekTo) {
-        this._player.seekTo(seconds, true);
-
-        // Explicitly call _updatePlaybackStats() to ensure that the new playback info is
-        // reflected in the bound attributes.
-        // The 100ms delay is somewhat arbitrary, but the YouTube player does need time to
-        // update its internal state following the call to player.seekTo().
-        this.async(function() {
-          this._updatePlaybackStats();
-        }, 100);
-      }
-    },
-
-    /**
-     * This function sets the suggested playback rate for the current video.
-     * If the playback rate changes, it will only change for the video that is already cued or being played.
-     * If you set the playback rate for a cued video, that rate will still be in effect when the `playVideo` function is called or the user initiates playback directly through the player controls.
-     * In addition, calling functions to cue or load videos or playlists (`cueVideoById`, `loadVideoById`, etc.) will reset the playback rate to 1.
-     *
-     * Calling this function does not guarantee that the playback rate will actually change.
-     * However, if the playback rate does change, the `onPlaybackRateChange` event will fire, and your code should respond to the event rather than the fact that it called the `setPlaybackRate` function.
-     *
-     * The `getAvailablePlaybackRates` method will return the possible playback rates for the currently playing video.
-     * However, if you set the `suggestedRate` parameter to a non-supported integer or float value, the player will round that value down to the nearest supported value in the direction of 1.
-     *
-     * @method setPlaybackRate
-     * @param {number} suggestedRate Playback rate for the current video.
-     */
-    setPlaybackRate: function(suggestedRate) {
-      if(this._player && this._player.setPlaybackRate) {
-        this._player.setPlaybackRate(suggestedRate);
-      }
-    },
-
-    /**
-     * This function sets the suggested video quality for the current video.
-     * The function causes the video to reload at its current position in the new quality.
-     * If the playback quality does change, it will only change for the video being played.
-     * Calling this function does not guarantee that the playback quality will actually change.
-     * However, if the playback quality does change, the `onPlaybackQualityChange` event will fire, and your code should respond to the event rather than the fact that it called the `setPlaybackQuality` function.
-     *
-     * The `suggestedQuality` parameter value can be `small`, `medium`, `large`, `hd720`, `hd1080`, `highres` or `default`.
-     * We recommend that you set the parameter value to default, which instructs YouTube to select the most appropriate playback quality, which will vary for different users, videos, systems and other playback conditions.
-     *
-     * When you suggest a playback quality for a video, the suggested quality will only be in effect for that video.
-     * You should select a playback quality that corresponds to the size of your video player.
-     * For example, if your page displays a `1280px` by `720px` video player, a `hd720` quality video will actually look better than an `hd1080` quality video.
-     * We recommend calling the `getAvailableQualityLevels()` function to determine which quality levels are available for a video.
-     *
-     * The list below shows the playback quality levels that correspond to different standard player sizes.
-     * We recommend that you set the height of your video player to one of the values listed below and that you size your player to use 16:9 aspect ratio.
-     * As stated above, even if you choose a standard player size, we also recommend that you set the `suggestedQuality` parameter value to default to enable YouTube to select the most appropriate playback quality.
-     *
-     * - `small`: Player height is 240px, and player dimensions are at least 320px by 240px for 4:3 aspect ratio.
-     * - `medium`: Player height is 360px, and player dimensions are 640px by 360px (for 16:9 aspect ratio) or 480px by 360px (for 4:3 aspect ratio).
-     * - `large`: Player height is 480px, and player dimensions are 853px by 480px (for 16:9 aspect ratio) or 640px by 480px (for 4:3 aspect ratio).
-     * - `hd720`: Player height is 720px, and player dimensions are 1280px by 720px (for 16:9 aspect ratio) or 960px by 720px (for 4:3 aspect ratio).
-     * - `hd1080`: Player height is 1080px, and player dimensions are 1920px by 1080px (for 16:9 aspect ratio) or 1440px by 1080px (for 4:3 aspect ratio).
-     * - `highres`: Player height is greater than 1080px, which means that the player's aspect ratio is greater than 1920px by 1080px.
-     * - `default`: YouTube selects the appropriate playback quality. This setting effectively reverts the quality level to the default state and nullifies any previous efforts to set playback quality using the `cueVideoById`, `loadVideoById` or `setPlaybackQuality` functions.
-     *
-     * If you call the `setPlaybackQuality` function with a `suggestedQuality` level that is not available for the video, then the quality will be set to the next lowest level that is available.
-     * For example, if you request a quality level of large, and that is unavailable, then the playback quality will be set to medium (as long as that quality level is available).
-     *
-     * In addition, setting `suggestedQuality` to a value that is not a recognized quality level is equivalent to setting `suggestedQuality` to default.
-     *
-     * @method setPlaybackQuality
-     * @param {string} suggestedQuality Playback quality for the current video.
-     */
-    setPlaybackQuality: function(suggestedQuality) {
-      if(this._player && this._player.setPlaybackQuality) {
-        this._player.setPlaybackQuality(suggestedQuality);
-      }
-    },
-
-    _videoIdChanged: function() {
-      this.currenttime = 0;
-      this.currenttimeformatted = this._toHHMMSS(0);
-      this.fractionloaded = 0;
-      this.duration = 1;
-      this.durationformatted = this._toHHMMSS(0);
-
-      if (!this._player || !this._player.cueVideoById) {
-        this._pendingVideoId = this.videoId;
-      } else {
-        // Figure out whether we should cue or load (which will autoplay) the next video.
-        if (this.playsupported && this.attributes['autoplay'] && this.attributes['autoplay'].value == '1') {
-          this._player.loadVideoById(this.videoId);
-        } else {
-          this._player.cueVideoById(this.videoId);
+
+        for (var i = 0; i < this.attributes.length; i++) {
+          var attribute = this.attributes[i];
+          playerVars[attribute.nodeName] = attribute.value;
         }
-      }
-    },
-
-    _player: null,
-    __updatePlaybackStatsInterval: null,
-    _pendingVideoId: '',
-
-    _apiLoad: function() {
-      // Establish some defaults. Attributes set on the google-youtube element
-      // can override defaults, or specify additional player parameters. See
-      // https://developers.google.com/youtube/player_parameters
-      var playerVars = {
-        playsinline: 1,
-        controls: 2,
-        autohide: 1,
-        // This will (intentionally) be overwritten if this.attributes['autoplay'] is set.
-        autoplay: this.autoplay
-      };
-
-      if (this.chromeless) {
-        playerVars.controls = 0;
-        playerVars.modestbranding = 1;
-        playerVars.showinfo = 0;
-        // Disable annotations.
-        playerVars.iv_load_policy = 3;
-        // Disable related videos on the end screen.
-        playerVars.rel = 0;
-      }
 
-      for (var i = 0; i < this.attributes.length; i++) {
-        var attribute = this.attributes[i];
-        playerVars[attribute.nodeName] = attribute.value;
-      }
+        this._player = new YT.Player(this.$.player, {
+          videoId: this.videoId,
+          width: '100%',
+          height: '100%',
+          playerVars: playerVars,
+          events: {
+            onReady: (e) => {
+              if (this._pendingVideoId && this._pendingVideoId != this.videoId) {
+                this._player.cueVideoById(this._pendingVideoId);
+                this._pendingVideoId = '';
+              }
 
-      this._player = new YT.Player(this.$.player, {
-        videoId: this.videoId,
-        width: '100%',
-        height: '100%',
-        playerVars: playerVars,
-        events: {
-          onReady: function(e) {
-            if (this._pendingVideoId && this._pendingVideoId != this.videoId) {
-              this._player.cueVideoById(this._pendingVideoId);
-              this._pendingVideoId = '';
-            }
+              this.dispatchEvent(new CustomEvent('google-youtube-ready'), e);
+            },
+            onStateChange: (e) => {
+              this.state = e.data;
+
+              // The YouTube Player API only exposes playback data about a video once
+              // playback has begun.
+              if (this.state == 1) {
+                this.playbackstarted = true;
+
+                // After playback has begun, play() can always be used to resume playback if the video is paused.
+                this.playsupported = true;
+
+                this.duration = this._player.getDuration();
+                this.durationformatted = this._toHHMMSS(this.duration);
+
+                if (!this.__updatePlaybackStatsInterval) {
+                  this.__updatePlaybackStatsInterval = setInterval(() => {
+                    this._updatePlaybackStats();
+                  }, 1000);
+                }
+              } else {
+                // We only need to update the stats if the video is playing.
+                if (this.__updatePlaybackStatsInterval) {
+                  clearInterval(this.__updatePlaybackStatsInterval);
+                  this.__updatePlaybackStatsInterval = null;
+                }
+              }
 
-            this.fire('google-youtube-ready', e);
-          }.bind(this),
-          onStateChange: function(e) {
-            this.state = e.data;
+              this.dispatchEvent(new CustomEvent('google-youtube-state-change'), e);
+            },
+            onError: (e) => {
+              // Set the player state to 0 ('ended'), since playback will have stopped.
+              this.state = 0;
 
-            // The YouTube Player API only exposes playback data about a video once
-            // playback has begun.
-            if (this.state == 1) {
-              this.playbackstarted = true;
+              this.dispatchEvent(new CustomEvent('google-youtube-error'), e);
+            }
+          }
+        });
+      }
 
-              // After playback has begun, play() can always be used to resume playback if the video is paused.
-              this.playsupported = true;
+      _updatePlaybackStats() {
+        this.currenttime = Math.round(this._player.getCurrentTime());
+        this.currenttimeformatted = this._toHHMMSS(this.currenttime);
+        this.fractionloaded = this._player.getVideoLoadedFraction();
+      }
 
-              this.duration = this._player.getDuration();
-              this.durationformatted = this._toHHMMSS(this.duration);
+      _toHHMMSS(totalSeconds) {
+        var hours = Math.floor(totalSeconds / 3600);
+        totalSeconds -= hours * 3600;
+        var minutes = Math.floor(totalSeconds / 60);
+        var seconds = Math.round(totalSeconds - (minutes * 60));
 
-              if (!this.__updatePlaybackStatsInterval) {
-                this.__updatePlaybackStatsInterval = setInterval(this._updatePlaybackStats.bind(this), 1000);
-              }
-            } else {
-              // We only need to update the stats if the video is playing.
-              if (this.__updatePlaybackStatsInterval) {
-                clearInterval(this.__updatePlaybackStatsInterval);
-                this.__updatePlaybackStatsInterval = null;
-              }
-            }
+        var hourPortion = '';
+        if (hours > 0) {
+          hourPortion += hours + ':';
 
-            this.fire('google-youtube-state-change', e);
-          }.bind(this),
-          onPlaybackQualityChange: function(e) {
-            this.playbackquality = e.data;
-          }.bind(this),
-          onPlaybackRateChange: function(e) {
-            this.playbackrate = e.data;
-          }.bind(this),
-          onError: function(e) {
-            // Set the player state to 0 ('ended'), since playback will have stopped.
-            this.state = 0;
-
-            this.fire('google-youtube-error', e);
-          }.bind(this)
+          if (minutes < 10) {
+            minutes = '0' + minutes;
+          }
         }
-      });
-    },
-
-    _updatePlaybackStats: function() {
-      this.currenttime = Math.round(this._player.getCurrentTime());
-      this.currenttimeformatted = this._toHHMMSS(this.currenttime);
-      this.fractionloaded = this._player.getVideoLoadedFraction();
-      this.volume = this._player.getVolume();
-    },
-
-    _toHHMMSS: function(totalSeconds) {
-      var hours = Math.floor(totalSeconds / 3600);
-      totalSeconds -= hours * 3600;
-      var minutes = Math.floor(totalSeconds / 60);
-      var seconds = Math.round(totalSeconds - (minutes * 60));
-
-      var hourPortion = '';
-      if (hours > 0) {
-        hourPortion += hours + ':';
-
-        if (minutes < 10) {
-          minutes = '0' + minutes;
+
+        if (seconds < 10) {
+          seconds = '0' + seconds;
         }
-      }
 
-      if (seconds < 10) {
-        seconds = '0' + seconds;
+        return hourPortion + minutes + ':' + seconds;
       }
 
-      return hourPortion + minutes + ':' + seconds;
-    },
-
-    _handleThumbnailTap: function() {
-      this.autoplay = 1;
-      this.thumbnail = '';
+      _handleThumbnailTap() {
+        this.autoplay = 1;
+        this.thumbnail = '';
+      }
     }
-  });
-</script>
+    customElements.define(GoogleYoutube.is, GoogleYoutube);
+  </script>
+</dom-module>
\ No newline at end of file

From 1bcc2de9c165c4725f6df0bbdc227f8be05059f7 Mon Sep 17 00:00:00 2001
From: Karl Podger <karl.podger@primeordinal.com>
Date: Wed, 25 Jan 2017 18:04:14 +0000
Subject: [PATCH 2/3] Update bower dependencies

---
 bower.json | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/bower.json b/bower.json
index c3e4961..0e78777 100755
--- a/bower.json
+++ b/bower.json
@@ -3,7 +3,7 @@
   "description": "YouTube video playback web component.",
   "homepage": "https://googlewebcomponents.github.io/google-youtube",
   "main": "google-youtube.html",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "authors": [
     "Jeff Posnick <jeffy@google.com>"
   ],
@@ -20,12 +20,32 @@
     "web-component"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.0.0",
+    "polymer": "Polymer/polymer#2.0-preview",
     "google-apis": "GoogleWebComponents/google-apis#^1.0.0",
-    "iron-localstorage": "PolymerElements/iron-localstorage#^1.0.0"
+    "iron-localstorage": "PolymerElements/iron-localstorage#2.0-preview"
   },
   "devDependencies": {
     "web-component-tester": "*",
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
+    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.2.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
+        "paper-styles": "PolymerElements/paper-styles#^1.0.4",
+        "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+        "web-component-tester": "^4.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+      }
+    }
+  },
+  "resolutions": {
+    "test-fixture": "^2.0.0",
+    "webcomponentsjs": "v1",
+    "polymer": "2.0-preview"
   }
 }

From 2d5ed9b25a9bb009614f190c0f40a999bcee5e08 Mon Sep 17 00:00:00 2001
From: Karl Podger <karl.podger@primeordinal.com>
Date: Sun, 29 Jan 2017 22:23:58 +0000
Subject: [PATCH 3/3] Replace this.async with window.requestAnimationFrame

Should fix error in Safari
---
 google-youtube.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/google-youtube.html b/google-youtube.html
index cc3872f..2e283fd 100755
--- a/google-youtube.html
+++ b/google-youtube.html
@@ -393,7 +393,7 @@
 
             document.body.appendChild(videoElement);
 
-            this.async(() => {
+            window.requestAnimationFrame(() => {
               // Ideally, we'll get a 'playing' event if we're on a browser that supports
               // programmatic play().
               videoElement.onplaying = function(e) {
@@ -552,7 +552,7 @@
           // reflected in the bound attributes.
           // The 100ms delay is somewhat arbitrary, but the YouTube player does need time to
           // update its internal state following the call to player.seekTo().
-          this.async(function() {
+          window.requestAnimationFrame(function() {
             this._updatePlaybackStats();
           }, null, 100);
         }