demo/dist/demo.js
function create(data) {
	    var _this10 = this;

	    var bindMenuItemShortcuts = controls.bindMenuItemShortcuts,
	        createButton = controls.createButton,
	        createProgress = controls.createProgress,
	        createRange = controls.createRange,
	        createTime = controls.createTime,
	        setQualityMenu = controls.setQualityMenu,
	        setSpeedMenu = controls.setSpeedMenu,
	        showMenuPanel = controls.showMenuPanel;
	    this.elements.controls = null; // Larger overlaid play button

	    if (this.config.controls.includes('play-large')) {
	      this.elements.container.appendChild(createButton.call(this, 'play-large'));
	    } // Create the container


	    var container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper));
	    this.elements.controls = container; // Default item attributes

	    var defaultAttributes = {
	      class: 'plyr__controls__item'
	    }; // Loop through controls in order

	    dedupe(this.config.controls).forEach(function (control) {
	      // Restart button
	      if (control === 'restart') {
	        container.appendChild(createButton.call(_this10, 'restart', defaultAttributes));
	      } // Rewind button


	      if (control === 'rewind') {
	        container.appendChild(createButton.call(_this10, 'rewind', defaultAttributes));
	      } // Play/Pause button


	      if (control === 'play') {
	        container.appendChild(createButton.call(_this10, 'play', defaultAttributes));
	      } // Fast forward button


	      if (control === 'fast-forward') {
	        container.appendChild(createButton.call(_this10, 'fast-forward', defaultAttributes));
	      } // Progress


	      if (control === 'progress') {
	        var progressContainer = createElement('div', {
	          class: "".concat(defaultAttributes.class, " plyr__progress__container")
	        });
	        var progress = createElement('div', getAttributesFromSelector(_this10.config.selectors.progress)); // Seek range slider

	        progress.appendChild(createRange.call(_this10, 'seek', {
	          id: "plyr-seek-".concat(data.id)
	        })); // Buffer progress

	        progress.appendChild(createProgress.call(_this10, 'buffer')); // TODO: Add loop display indicator
	        // Seek tooltip

	        if (_this10.config.tooltips.seek) {
	          var tooltip = createElement('span', {
	            class: _this10.config.classNames.tooltip
	          }, '00:00');
	          progress.appendChild(tooltip);
	          _this10.elements.display.seekTooltip = tooltip;
	        }

	        _this10.elements.progress = progress;
	        progressContainer.appendChild(_this10.elements.progress);
	        container.appendChild(progressContainer);
	      } // Media current time display


	      if (control === 'current-time') {
	        container.appendChild(createTime.call(_this10, 'currentTime', defaultAttributes));
	      } // Media duration display


	      if (control === 'duration') {
	        container.appendChild(createTime.call(_this10, 'duration', defaultAttributes));
	      } // Volume controls


	      if (control === 'mute' || control === 'volume') {
	        var volume = _this10.elements.volume; // Create the volume container if needed

	        if (!is$1.element(volume) || !container.contains(volume)) {
	          volume = createElement('div', extend({}, defaultAttributes, {
	            class: "".concat(defaultAttributes.class, " plyr__volume").trim()
	          }));
	          _this10.elements.volume = volume;
	          container.appendChild(volume);
	        } // Toggle mute button


	        if (control === 'mute') {
	          volume.appendChild(createButton.call(_this10, 'mute'));
	        } // Volume range control


	        if (control === 'volume') {
	          // Set the attributes
	          var attributes = {
	            max: 1,
	            step: 0.05,
	            value: _this10.config.volume
	          }; // Create the volume range slider

	          volume.appendChild(createRange.call(_this10, 'volume', extend(attributes, {
	            id: "plyr-volume-".concat(data.id)
	          })));
	        }
	      } // Toggle captions button


	      if (control === 'captions') {
	        container.appendChild(createButton.call(_this10, 'captions', defaultAttributes));
	      } // Settings button / menu


	      if (control === 'settings' && !is$1.empty(_this10.config.settings)) {
	        var _control = createElement('div', extend({}, defaultAttributes, {
	          class: "".concat(defaultAttributes.class, " plyr__menu").trim(),
	          hidden: ''
	        }));

	        _control.appendChild(createButton.call(_this10, 'settings', {
	          'aria-haspopup': true,
	          'aria-controls': "plyr-settings-".concat(data.id),
	          'aria-expanded': false
	        }));

	        var popup = createElement('div', {
	          class: 'plyr__menu__container',
	          id: "plyr-settings-".concat(data.id),
	          hidden: ''
	        });
	        var inner = createElement('div');
	        var home = createElement('div', {
	          id: "plyr-settings-".concat(data.id, "-home")
	        }); // Create the menu

	        var menu = createElement('div', {
	          role: 'menu'
	        });
	        home.appendChild(menu);
	        inner.appendChild(home);
	        _this10.elements.settings.panels.home = home; // Build the menu items

	        _this10.config.settings.forEach(function (type) {
	          // TODO: bundle this with the createMenuItem helper and bindings
	          var menuItem = createElement('button', extend(getAttributesFromSelector(_this10.config.selectors.buttons.settings), {
	            type: 'button',
	            class: "".concat(_this10.config.classNames.control, " ").concat(_this10.config.classNames.control, "--forward"),
	            role: 'menuitem',
	            'aria-haspopup': true,
	            hidden: ''
	          })); // Bind menu shortcuts for keyboard users

	          bindMenuItemShortcuts.call(_this10, menuItem, type); // Show menu on click

	          on(menuItem, 'click', function () {
	            showMenuPanel.call(_this10, type, false);
	          });
	          var flex = createElement('span', null, i18n.get(type, _this10.config));
	          var value = createElement('span', {
	            class: _this10.config.classNames.menu.value
	          }); // Speed contains HTML entities

	          value.innerHTML = data[type];
	          flex.appendChild(value);
	          menuItem.appendChild(flex);
	          menu.appendChild(menuItem); // Build the panes

	          var pane = createElement('div', {
	            id: "plyr-settings-".concat(data.id, "-").concat(type),
	            hidden: ''
	          }); // Back button

	          var backButton = createElement('button', {
	            type: 'button',
	            class: "".concat(_this10.config.classNames.control, " ").concat(_this10.config.classNames.control, "--back")
	          }); // Visible label

	          backButton.appendChild(createElement('span', {
	            'aria-hidden': true
	          }, i18n.get(type, _this10.config))); // Screen reader label

	          backButton.appendChild(createElement('span', {
	            class: _this10.config.classNames.hidden
	          }, i18n.get('menuBack', _this10.config))); // Go back via keyboard

	          on(pane, 'keydown', function (event) {
	            // We only care about <-
	            if (event.which !== 37) {
	              return;
	            } // Prevent seek


	            event.preventDefault();
	            event.stopPropagation(); // Show the respective menu

	            showMenuPanel.call(_this10, 'home', true);
	          }, false); // Go back via button click

	          on(backButton, 'click', function () {
	            showMenuPanel.call(_this10, 'home', false);
	          }); // Add to pane

	          pane.appendChild(backButton); // Menu

	          pane.appendChild(createElement('div', {
	            role: 'menu'
	          }));
	          inner.appendChild(pane);
	          _this10.elements.settings.buttons[type] = menuItem;
	          _this10.elements.settings.panels[type] = pane;
	        });

	        popup.appendChild(inner);

	        _control.appendChild(popup);

	        container.appendChild(_control);
	        _this10.elements.settings.popup = popup;
	        _this10.elements.settings.menu = _control;
	      } // Picture in picture button


	      if (control === 'pip' && support.pip) {
	        container.appendChild(createButton.call(_this10, 'pip', defaultAttributes));
	      } // Airplay button


	      if (control === 'airplay' && support.airplay) {
	        container.appendChild(createButton.call(_this10, 'airplay', defaultAttributes));
	      } // Download button


	      if (control === 'download') {
	        var _attributes = extend({}, defaultAttributes, {
	          element: 'a',
	          href: _this10.download,
	          target: '_blank'
	        });

	        var download = _this10.config.urls.download;

	        if (!is$1.url(download) && _this10.isEmbed) {
	          extend(_attributes, {
	            icon: "logo-".concat(_this10.provider),
	            label: _this10.provider
	          });
	        }

	        container.appendChild(createButton.call(_this10, 'download', _attributes));
	      } // Toggle fullscreen button


	      if (control === 'fullscreen') {
	        container.appendChild(createButton.call(_this10, 'fullscreen', defaultAttributes));
	      }
	    }); // Set available quality levels

	    if (this.isHTML5) {
	      setQualityMenu.call(this, html5.getQualityOptions.call(this));
	    }

	    setSpeedMenu.call(this);
	    return container;
	  }
function create(data) {
	    var _this10 = this;

	    var bindMenuItemShortcuts = controls.bindMenuItemShortcuts,
	        createButton = controls.createButton,
	        createProgress = controls.createProgress,
	        createRange = controls.createRange,
	        createTime = controls.createTime,
	        setQualityMenu = controls.setQualityMenu,
	        setSpeedMenu = controls.setSpeedMenu,
	        showMenuPanel = controls.showMenuPanel;
	    this.elements.controls = null; // Larger overlaid play button

	    if (this.config.controls.includes('play-large')) {
	      this.elements.container.appendChild(createButton.call(this, 'play-large'));
	    } // Create the container


	    var container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper));
	    this.elements.controls = container; // Default item attributes

	    var defaultAttributes = {
	      class: 'plyr__controls__item'
	    }; // Loop through controls in order

	    dedupe(this.config.controls).forEach(function (control) {
	      // Restart button
	      if (control === 'restart') {
	        container.appendChild(createButton.call(_this10, 'restart', defaultAttributes));
	      } // Rewind button


	      if (control === 'rewind') {
	        container.appendChild(createButton.call(_this10, 'rewind', defaultAttributes));
	      } // Play/Pause button


	      if (control === 'play') {
	        container.appendChild(createButton.call(_this10, 'play', defaultAttributes));
	      } // Fast forward button


	      if (control === 'fast-forward') {
	        container.appendChild(createButton.call(_this10, 'fast-forward', defaultAttributes));
	      } // Progress


	      if (control === 'progress') {
	        var progressContainer = createElement('div', {
	          class: "".concat(defaultAttributes.class, " plyr__progress__container")
	        });
	        var progress = createElement('div', getAttributesFromSelector(_this10.config.selectors.progress)); // Seek range slider

	        progress.appendChild(createRange.call(_this10, 'seek', {
	          id: "plyr-seek-".concat(data.id)
	        })); // Buffer progress

	        progress.appendChild(createProgress.call(_this10, 'buffer')); // TODO: Add loop display indicator
	        // Seek tooltip

	        if (_this10.config.tooltips.seek) {
	          var tooltip = createElement('span', {
	            class: _this10.config.classNames.tooltip
	          }, '00:00');
	          progress.appendChild(tooltip);
	          _this10.elements.display.seekTooltip = tooltip;
	        }

	        _this10.elements.progress = progress;
	        progressContainer.appendChild(_this10.elements.progress);
	        container.appendChild(progressContainer);
	      } // Media current time display


	      if (control === 'current-time') {
	        container.appendChild(createTime.call(_this10, 'currentTime', defaultAttributes));
	      } // Media duration display


	      if (control === 'duration') {
	        container.appendChild(createTime.call(_this10, 'duration', defaultAttributes));
	      } // Volume controls


	      if (control === 'mute' || control === 'volume') {
	        var volume = _this10.elements.volume; // Create the volume container if needed

	        if (!is$1.element(volume) || !container.contains(volume)) {
	          volume = createElement('div', extend({}, defaultAttributes, {
	            class: "".concat(defaultAttributes.class, " plyr__volume").trim()
	          }));
	          _this10.elements.volume = volume;
	          container.appendChild(volume);
	        } // Toggle mute button


	        if (control === 'mute') {
	          volume.appendChild(createButton.call(_this10, 'mute'));
	        } // Volume range control


	        if (control === 'volume') {
	          // Set the attributes
	          var attributes = {
	            max: 1,
	            step: 0.05,
	            value: _this10.config.volume
	          }; // Create the volume range slider

	          volume.appendChild(createRange.call(_this10, 'volume', extend(attributes, {
	            id: "plyr-volume-".concat(data.id)
	          })));
	        }
	      } // Toggle captions button


	      if (control === 'captions') {
	        container.appendChild(createButton.call(_this10, 'captions', defaultAttributes));
	      } // Settings button / menu


	      if (control === 'settings' && !is$1.empty(_this10.config.settings)) {
	        var _control = createElement('div', extend({}, defaultAttributes, {
	          class: "".concat(defaultAttributes.class, " plyr__menu").trim(),
	          hidden: ''
	        }));

	        _control.appendChild(createButton.call(_this10, 'settings', {
	          'aria-haspopup': true,
	          'aria-controls': "plyr-settings-".concat(data.id),
	          'aria-expanded': false
	        }));

	        var popup = createElement('div', {
	          class: 'plyr__menu__container',
	          id: "plyr-settings-".concat(data.id),
	          hidden: ''
	        });
	        var inner = createElement('div');
	        var home = createElement('div', {
	          id: "plyr-settings-".concat(data.id, "-home")
	        }); // Create the menu

	        var menu = createElement('div', {
	          role: 'menu'
	        });
	        home.appendChild(menu);
	        inner.appendChild(home);
	        _this10.elements.settings.panels.home = home; // Build the menu items

	        _this10.config.settings.forEach(function (type) {
	          // TODO: bundle this with the createMenuItem helper and bindings
	          var menuItem = createElement('button', extend(getAttributesFromSelector(_this10.config.selectors.buttons.settings), {
	            type: 'button',
	            class: "".concat(_this10.config.classNames.control, " ").concat(_this10.config.classNames.control, "--forward"),
	            role: 'menuitem',
	            'aria-haspopup': true,
	            hidden: ''
	          })); // Bind menu shortcuts for keyboard users

	          bindMenuItemShortcuts.call(_this10, menuItem, type); // Show menu on click

	          on(menuItem, 'click', function () {
	            showMenuPanel.call(_this10, type, false);
	          });
	          var flex = createElement('span', null, i18n.get(type, _this10.config));
	          var value = createElement('span', {
	            class: _this10.config.classNames.menu.value
	          }); // Speed contains HTML entities

	          value.innerHTML = data[type];
	          flex.appendChild(value);
	          menuItem.appendChild(flex);
	          menu.appendChild(menuItem); // Build the panes

	          var pane = createElement('div', {
	            id: "plyr-settings-".concat(data.id, "-").concat(type),
	            hidden: ''
	          }); // Back button

	          var backButton = createElement('button', {
	            type: 'button',
	            class: "".concat(_this10.config.classNames.control, " ").concat(_this10.config.classNames.control, "--back")
	          }); // Visible label

	          backButton.appendChild(createElement('span', {
	            'aria-hidden': true
	          }, i18n.get(type, _this10.config))); // Screen reader label

	          backButton.appendChild(createElement('span', {
	            class: _this10.config.classNames.hidden
	          }, i18n.get('menuBack', _this10.config))); // Go back via keyboard

	          on(pane, 'keydown', function (event) {
	            // We only care about <-
	            if (event.which !== 37) {
	              return;
	            } // Prevent seek


	            event.preventDefault();
	            event.stopPropagation(); // Show the respective menu

	            showMenuPanel.call(_this10, 'home', true);
	          }, false); // Go back via button click

	          on(backButton, 'click', function () {
	            showMenuPanel.call(_this10, 'home', false);
	          }); // Add to pane

	          pane.appendChild(backButton); // Menu

	          pane.appendChild(createElement('div', {
	            role: 'menu'
	          }));
	          inner.appendChild(pane);
	          _this10.elements.settings.buttons[type] = menuItem;
	          _this10.elements.settings.panels[type] = pane;
	        });

	        popup.appendChild(inner);

	        _control.appendChild(popup);

	        container.appendChild(_control);
	        _this10.elements.settings.popup = popup;
	        _this10.elements.settings.menu = _control;
	      } // Picture in picture button


	      if (control === 'pip' && support.pip) {
	        container.appendChild(createButton.call(_this10, 'pip', defaultAttributes));
	      } // Airplay button


	      if (control === 'airplay' && support.airplay) {
	        container.appendChild(createButton.call(_this10, 'airplay', defaultAttributes));
	      } // Download button


	      if (control === 'download') {
	        var _attributes = extend({}, defaultAttributes, {
	          element: 'a',
	          href: _this10.download,
	          target: '_blank'
	        });

	        var download = _this10.config.urls.download;

	        if (!is$1.url(download) && _this10.isEmbed) {
	          extend(_attributes, {
	            icon: "logo-".concat(_this10.provider),
	            label: _this10.provider
	          });
	        }

	        container.appendChild(createButton.call(_this10, 'download', _attributes));
	      } // Toggle fullscreen button


	      if (control === 'fullscreen') {
	        container.appendChild(createButton.call(_this10, 'fullscreen', defaultAttributes));
	      }
	    }); // Set available quality levels

	    if (this.isHTML5) {
	      setQualityMenu.call(this, html5.getQualityOptions.call(this));
	    }

	    setSpeedMenu.call(this);
	    return container;
	  }
Build the default HTML