3.0.0-beta.12

Added backwards compatibility for <div> embeds
Removed fetch dependency
2018-02-06 00:25:50 +11:00 · 2018-02-06 00:24:48 +11:00 · 2018-02-05 21:43:32 +11:00 · 2018-02-05 21:28:16 +11:00 · 2018-02-05 21:26:18 +11:00 · 2018-02-03 23:16:52 +11:00
31 changed files with 356 additions and 339 deletions
--- a/.npmignore
+++ b/.npmignore
@ -0,0 +1,4 @@
+demo
+.github
+.vscode
+*.code-workspace
--- a/changelog.md
+++ b/changelog.md
@ -17,8 +17,8 @@ This is a massive release. A _mostly_ complete rewrite in ES6. What started out

 ### Other stuff

-* Now using SASS exclusively. Sorry, LESS folk it just made sense to maintain one method as SASS is what the cool kids use
-* Moved to ES6. All the rage these days
+* Now using SASS exclusively. Sorry, LESS folk it just made sense to maintain one method as SASS is what the cool kids use. It may come back if we work out an automated way to convert the SASS
+* Moved to ES6. All the rage these days. You'll need to look at polyfills. The demo uses [polyfill.io](https://polyfill.io)
 * Added basic looping support
 * Added an aspect ratio option for those that can't leave the 90s and want 4:3
 * `controlshidden` and `controlsshown` events added for when the controls show or hide
@ -44,6 +44,7 @@ You gotta break eggs to make an omelette. Sadly, there's quite a few breaking ch

 * Setup now uses proper constructor, accepts a single selector/element/node and returns a single instance - much simpler than before
 * Much of the API is now using getters and setters rather than methods (where it makes sense) to match the HTML5 API - see the docs for more info
+* The data attributes for the embeds are now `data-plyr-provider` and `data-plyr-embed-id` to prevent compatibility issues. These can be changed under `config.attributes.embed` if required
 * `blankUrl` -> `blankVideo`
 * `volume` is now `0` to `1` as per HTML5 spec
 * `keyboardShorcuts` (typo) is now just `keyboard`
@ -66,7 +67,7 @@ You gotta break eggs to make an omelette. Sadly, there's quite a few breaking ch

 ### Polyfilling

-Because we're using the fancy new ES6 syntax, you will need to polyfill for vintage browsers if you want to use Plyr and still support them. Luckily there's a decent service for this that makes it painless, [https://polyfill.io](polyfill.io).
+Because we're using the fancy new ES6 syntax, you will need to polyfill for vintage browsers if you want to use Plyr and still support them. Luckily there's a decent service for this that makes it painless, [polyfill.io](https://polyfill.io).

 ## v2.0.18

--- a/demo/dist/demo.css
+++ b/demo/dist/demo.css
--- a/demo/dist/demo.js
+++ b/demo/dist/demo.js
@ -1,3 +1,3 @@
-!function(){"use strict";var e,t,o,i,a,r;document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new window.Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{tag:"https://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480"}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),a=window.history&&window.history.pushState;function r(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(a,n){if(a in o&&(n||a!==i)&&(i.length||a!==o.video)){switch(a){case o.video:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.source={type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=a,Array.from(t).forEach(function(e){return r(e.parentElement,"active",!1)}),r(document.querySelector('[data-source="'+a+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+a).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),a&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),a){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(e=window,t=document,o="script",i="ga",e.GoogleAnalyticsObject=i,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,a=t.createElement(o),r=t.getElementsByTagName(o)[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",r.parentNode.insertBefore(a,r),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"))}();
+!function(){"use strict";var e,t,o,i,r,a;document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new Plyr("#player",{debug:!0,title:"View From A Blue Moon",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{enabled:!0}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),r=window.history&&window.history.pushState;function a(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(r,n){if(r in o&&(n||r!==i)&&(i.length||r!==o.video)){switch(r){case o.video:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.source={type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=r,Array.from(t).forEach(function(e){return a(e.parentElement,"active",!1)}),a(document.querySelector('[data-source="'+r+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+r).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),r&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),r){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(e=window,t=document,o="script",i="ga",e.GoogleAnalyticsObject=i,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,r=t.createElement(o),a=t.getElementsByTagName(o)[0],r.async=1,r.src="//www.google-analytics.com/analytics.js",a.parentNode.insertBefore(r,a),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"))}();

 //# sourceMappingURL=demo.js.map
--- a/demo/dist/demo.js.map
+++ b/demo/dist/demo.js.map
--- a/demo/error.html
+++ b/demo/error.html
@ -10,6 +10,7 @@
    <link rel="stylesheet" href="dist/error.css">

    <!-- Preload -->
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
 </head>
--- a/demo/index.html
+++ b/demo/index.html
@ -30,6 +30,7 @@
    <link rel="stylesheet" href="dist/demo.css">

    <!-- Preload -->
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
 </head>
@ -65,8 +66,11 @@
                    </svg>Vimeo</button>
            </p>

-            <p>Advertisement service provided by
-                <a href="https://vi.ai" target="_blank">vi.ai</a>
+            <p>Premium video monitization from
+                <a href="https://vi.ai/publisher-video-monetization/" target="_blank" class="no-border">
+                    <img src="https://cdn.plyr.io/static/vi-logo-24x24.svg" alt="ai.vi">
+                    <span class="sr-only">ai.vi</span>
+                </a>
            </p>

            <div class="call-to-action">
@ -166,7 +170,7 @@
    </aside>

    <!-- Polyfills -->
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,fetch"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent"></script>

    <!-- Plyr core script -->
    <script src="../dist/plyr.js"></script>
--- a/demo/index.local.html
+++ b/demo/index.local.html
@ -1,183 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8" />
-    <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title>
-    <meta name="description" property="og:description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
-    <meta name="author" content="Sam Potts">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Icons -->
-    <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico">
-    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32">
-    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16">
-    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png">
-
-    <!-- Opengraph -->
-    <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player">
-    <meta property="og:site_name" content="Plyr">
-    <meta property="og:url" content="https://plyr.io">
-    <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png">
-
-    <!-- Twitter -->
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:site" content="@sam_potts">
-    <meta name="twitter:creator" content="@sam_potts">
-    <meta name="twitter:card" content="summary_large_image">
-
-    <!-- Docs styles -->
-    <link rel="stylesheet" href="dist/demo.css">
-
-    <!-- Preload -->
-    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
-    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
-</head>
-
-<body>
-    <div class="grid">
-        <header>
-            <h1>Plyr</h1>
-            <p>A simple, accessible and customisable media player for
-                <button type="button" class="faux-link" data-source="video">
-                    <svg class="icon">
-                        <title>HTML5</title>
-                        <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
-                    </svg>Video</button>,
-                <button type="button" class="faux-link" data-source="audio">
-                    <svg class="icon">
-                        <title>HTML5</title>
-                        <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
-                    </svg>Audio</button>,
-                <button type="button" class="faux-link" data-source="youtube">
-                    <svg class="icon" role="presentation">
-                        <title>YouTube</title>
-                        <path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
-                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
-                    M6,11V5l5,3L6,11z"></path>
-                    </svg>YouTube</button> and
-                <button type="button" class="faux-link" data-source="vimeo">
-                    <svg class="icon" role="presentation">
-                        <title>Vimeo</title>
-                        <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
-                       C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
-                       c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
-                    </svg>Vimeo</button>
-            </p>
-
-            <!--<p>Monetization options provided by
-                <a href="https://vi.ai" target="_blank">vi.ai</a>
-            </p>-->
-
-            <div class="call-to-action">
-                <span class="button--with-count">
-                    <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
-                        <svg class="icon" role="presentation">
-                            <title>GitHub</title>
-                            <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
-               C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
-               c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
-               c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
-               c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
-               c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"></path>
-                        </svg>
-                        Download on GitHub
-                    </a>
-                </span>
-            </div>
-        </header>
-
-        <main>
-            <video controls crossorigin playsinline poster="media/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
-                <!-- Video files -->
-                <source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
-                <!--<source src="media/View_From_A_Blue_Moon_Trailer-UHD.mp4" type="video/mp4">-->
-
-                <!-- Text track file -->
-                <track kind="captions" label="English" srclang="en" src="media/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
-                <track kind="captions" label="Français" srclang="fr" src="media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
-
-                <!-- Fallback for browsers that don't support the <video> element -->
-                <a href="media/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
-            </video>
-
-            <ul>
-                <li class="plyr__cite plyr__cite--video" hidden>
-                    <small>
-                        <svg class="icon">
-                            <title>HTML5</title>
-                            <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
-                        </svg>
-                        <a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
-                    </small>
-                </li>
-                <li class="plyr__cite plyr__cite--audio" hidden>
-                    <small>
-                        <svg class="icon" title="HTML5">
-                            <title>HTML5</title>
-                            <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
-                        </svg>
-                        <a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi
-                    </small>
-                </li>
-                <li class="plyr__cite plyr__cite--youtube" hidden>
-                    <small>
-                        <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on&nbsp;
-                        <span class="color--youtube">
-                            <svg class="icon" role="presentation">
-                                <title>YouTube</title>
-                                <path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
-                                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
-                                    M6,11V5l5,3L6,11z"></path>
-                            </svg>YouTube
-                        </span>
-                    </small>
-                </li>
-                <li class="plyr__cite plyr__cite--vimeo" hidden>
-                    <small>
-                        <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on&nbsp;
-                        <span class="color--vimeo">
-                            <svg class="icon" role="presentation">
-                                <title>Vimeo</title>
-                                <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
-                               C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
-                               c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
-                            </svg>Vimeo
-                        </span>
-                    </small>
-                </li>
-            </ul>
-        </main>
-    </div>
-
-    <aside>
-        <svg class="icon">
-            <title>Twitter</title>
-            <path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
-       C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7
-       c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
-       c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"></path>
-        </svg>
-        <p>If you think Plyr's good,
-            <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
-                target="_blank" data-shr-network="twitter">tweet it</a>
-        </p>
-    </aside>
-
-    <!-- Polyfills -->
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,fetch"></script>
-
-    <!-- Plyr core script -->
-    <script src="../dist/plyr.js"></script>
-
-    <!-- Sharing libary (https://shr.one) -->
-    <script src="https://cdn.shr.one/1.0.1/shr.js"></script>
-
-    <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
-    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
-
-    <!-- Docs script -->
-    <script src="dist/demo.js"></script>
-</body>
-
-</html>
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@ -35,10 +35,10 @@ document.addEventListener('DOMContentLoaded', () => {
    });

    // Setup the player
-    const player = new window.Plyr('#player', {
+    const player = new Plyr('#player', {
        debug: true,
        title: 'View From A Blue Moon',
-        iconUrl: '../dist/plyr.svg',
+        // iconUrl: '../dist/plyr.svg',
        keyboard: {
            global: true,
        },
@ -52,11 +52,7 @@ document.addEventListener('DOMContentLoaded', () => {
            google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
        },
        ads: {
-            tag:
-                'https://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480',
-            // Test tags
-            // tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=',
-            // tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=',
+            enabled: true,
        },
    });

--- a/demo/src/sass/bundles/demo.scss
+++ b/demo/src/sass/bundles/demo.scss
@ -34,8 +34,13 @@
@import '../components/icons';
@import '../components/links';
@import '../components/lists';
+@import '../components/media';
@import '../components/navigation';
@import '../components/players';

 // Plyr
@import '../../../../src/sass/plyr';
+
+// Utils
+@import '../utilities/cosmetic';
+@import '../utilities/hidden';
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@ -42,4 +42,8 @@ a {
    &.tab-focus {
        @include tab-focus();
    }
+
+    &.no-border::after {
+        display: none;
+    }
 }
--- a/demo/src/sass/components/media.scss
+++ b/demo/src/sass/components/media.scss
@ -1,11 +1,10 @@
 // ==========================================================================
-// Color
+// Basic media
 // ==========================================================================

-.color--vimeo {
-    color: $color-vimeo;
-}
-
-.color--youtube {
-    color: $color-youtube;
+img,
+video,
+audio {
+    max-width: 100%;
+    vertical-align: middle;
 }
--- a/demo/src/sass/type/headings.scss
+++ b/demo/src/sass/type/headings.scss
@ -4,7 +4,7 @@

 h1 {
    @include font-size($font-size-h1);
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-light;
    letter-spacing: $letter-spacing-headings;
    margin: 0 0 ($spacing-base / 2);
 }
--- a/demo/src/sass/utilities/cosmetic.scss
+++ b/demo/src/sass/utilities/cosmetic.scss
@ -0,0 +1,7 @@
+// ==========================================================================
+// Misc cosmetic
+// ==========================================================================
+
+.no-border {
+    border: 0;
+}
--- a/demo/src/sass/utilities/hidden.scss
+++ b/demo/src/sass/utilities/hidden.scss
@ -5,3 +5,16 @@
 [hidden] {
    display: none;
 }
+
+// Hide only visually, but have it available for screen readers: h5bp.com/v
+.sr-only {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    opacity: 0.001;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/dist/plyr.js.map
+++ b/dist/plyr.js.map
--- a/gulpfile.js
+++ b/gulpfile.js
@ -312,9 +312,13 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
            .pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
            .pipe(gulp.dest(root));

-        // Replace versioned files in plyr.js
+        // Replace versioned URLs in source
+        const files = [
+            'plyr.js',
+            'defaults.js',
+        ];
        gulp
-            .src(path.join(root, 'src/js/plyr.js'))
+            .src(files.map(file => path.join(root, `src/js/${file}`)))
            .pipe(replace(semver, `v${version}`))
            .pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
            .pipe(gulp.dest(path.join(root, 'src/js/')));
--- a/package.json
+++ b/package.json
@ -1,9 +1,9 @@
 {
    "name": "plyr",
-    "version": "3.0.0-beta.6",
+    "version": "3.0.0-beta.12",
    "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
    "homepage": "https://plyr.io",
-    "main": "./dist",
+    "main": "./dist/plyr.js",
    "sass": "./src/sass/plyr.scss",
    "style": "./dist/plyr.css",
    "devDependencies": {
@ -12,7 +12,7 @@
        "babel-plugin-external-helpers": "^6.22.0",
        "babel-preset-env": "^1.6.1",
        "del": "^3.0.0",
-        "eslint": "^4.16.0",
+        "eslint": "^4.17.0",
        "eslint-config-airbnb-base": "^12.1.0",
        "eslint-config-prettier": "^2.9.0",
        "eslint-plugin-import": "^2.8.0",
@ -28,12 +28,12 @@
        "gulp-s3": "^0.11.0",
        "gulp-sass": "^3.1.0",
        "gulp-size": "^3.0.0",
-        "gulp-sourcemaps": "^1.12.1",
+        "gulp-sourcemaps": "^2.6.4",
        "gulp-svgmin": "^1.2.4",
        "gulp-svgstore": "^6.1.1",
        "gulp-util": "^3.0.8",
        "rollup-plugin-babel": "^3.0.3",
-        "rollup-plugin-commonjs": "^8.2.6",
+        "rollup-plugin-commonjs": "^8.3.0",
        "rollup-plugin-node-resolve": "^3.0.2",
        "rollup-plugin-uglify": "^3.0.0",
        "run-sequence": "^2.2.1",
@ -42,9 +42,9 @@
        "stylelint-config-sass-guidelines": "^4.1.0",
        "stylelint-config-standard": "^18.0.0",
        "stylelint-order": "^0.8.0",
-        "stylelint-scss": "^2.2.0",
+        "stylelint-scss": "^2.3.0",
        "stylelint-selector-bem-pattern": "^2.0.0",
-        "uglify-es": "^3.3.8"
+        "uglify-es": "^3.3.9"
    },
    "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
    "repository": {
--- a/readme.md
+++ b/readme.md
@ -1,12 +1,12 @@
 ---
-Beware: This branch is currently in beta and not production-ready
+Beware: This version is currently in beta and not production-ready
 ---

 # Plyr

 A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers.

-[Checkout the demo](https://plyr.io) - [Donate to support Plyr](#donate)
+[Checkout the demo](https://plyr.io) - [Donate to support Plyr](#donate) - [Chat on Slack](https://bit.ly/plyr-slack)

 [![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png)](https://plyr.io)

@ -95,20 +95,40 @@ For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the

 #### YouTube embed

+We recommend [progressive enhancement](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/) with the embedded players. You can elect to use an `<iframe>` as the source element (which Plyr will progressively enhance) or a bog standard `<div>` with two essential data attributes - `data-plyr-provider` and `data-plyr-embed-id`.
+
 ```html
 <div class="plyr__video-embed" id="player">
    <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
 </div>
 ```

+_Note_: The `plyr__video-embed` classname will make the player a responsive 16:9 (most common) iframe embed. When plyr itself kicks in, your custom `ratio` config option will be used.
+
+Or the `<div>` non progressively enhanced method:
+
+```html
+<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
+```
+
+_Note_: The `data-plyr-embed-id` can either be the video ID or URL for the media.
+
 #### Vimeo embed

+Much the same as YouTube above.
+
 ```html
 <div class="plyr__video-embed" id="player">
    <iframe src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media" allowfullscreen allowtransparency allow="autoplay"></iframe>
 </div>
 ```

+Or the `<div>` non progressively enhanced method:
+
+```html
+<div id="player" data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>
+```
+
 ### JavaScript

 Include the `plyr.js` script before the closing `</body>` tag and then call `plyr.setup()`. More info on `setup()` can be found under
@ -122,9 +142,11 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:

 ```html
-<script src="https://cdn.plyr.io/3.0.0-beta.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.0.0-beta.12/plyr.js"></script>
 ```

+_Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
+
 ### CSS

 Include the `plyr.css` stylsheet into your `<head>`
@ -136,13 +158,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:

 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0-beta.6/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0-beta.12/plyr.css">
 ```

 ### SVG Sprite

 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0-beta.6/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0-beta.12/plyr.svg`.

 ## Advanced

@ -570,22 +592,25 @@ Fullscreen in Plyr is supported by all browsers that [currently support it](http

 ## Browser support

-Plyr supports the last 2 versions of most _modern_ browsers. IE11 is also supported.
+Plyr supports the last 2 versions of most _modern_ browsers.

-| Browser       | Supported      |
-| ------------- | -------------- |
-| Safari        | ✔              |
-| Mobile Safari | ✔&sup1;        |
-| Firefox       | ✔              |
-| Chrome        | ✔              |
-| Opera         | ✔              |
-| Edge          | ✔              |
-| IE10+         | ✔&sup2;        |
-| IE9           | API only&sup3; |
+| Browser       | Supported |
+| ------------- | --------- |
+| Safari        | ✔         |
+| Mobile Safari | ✔&sup1;   |
+| Firefox       | ✔         |
+| Chrome        | ✔         |
+| Opera         | ✔         |
+| Edge          | ✔         |
+| IE11          | ✔         |
+| IE10          | ✔&sup2;   |

-1. Mobile Safari on the iPhone forces the native player for `<video>` unless the `playsinline` attribute is present. Volume controls are also disabled.
-2. Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported (v1.0.28+)
-3. IE10 has no native fullscreen support, fallback can be used (see [options](#options))
+1. Mobile Safari on the iPhone forces the native player for `<video>` unless the `playsinline` attribute is present. Volume controls are also disabled as they are handled device wide.
+2. Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported. No native fullscreen support, fallback can be used (see [options](#options))
+
+### Polyfills
+
+Plyr uses ES6 which isn't supported in all browsers quite yet. This means some features will need to be polyfilled to be available otherwise you'll run into issues. We've elected to not burden the ~90% of users that do support these features with extra JS and instead leave polyfilling to you to work out based on your needs. The easiest method I've found is to use [polyfill.io](https://polyfill.io) which provides polyfills based on user agent. This is the method the demo uses.

 ### Checking for support

--- a/src/js/defaults.js
+++ b/src/js/defaults.js
@ -56,7 +56,7 @@ const defaults = {
    // Sprite (for icons)
    loadSprite: true,
    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/2.0.10/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.0.0-beta.12/plyr.svg',

    // Blank video (used to prevent errors on source change)
    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@ -179,6 +179,7 @@ const defaults = {
        reset: 'Reset',
        none: 'None',
        disabled: 'Disabled',
+        advertisment: 'Ad',
    },

    // URLs
@ -357,14 +358,23 @@ const defaults = {
        tabFocus: 'plyr__tab-focus',
    },

+    // Embed attributes
+    attributes: {
+        embed: {
+            provider: 'data-plyr-provider',
+            id: 'data-plyr-embed-id',
+        },
+    },
+
    // API keys
    keys: {
        google: null,
    },

-    // Ads
+    // Advertisements plugin
+    // Tag is not required as publisher is determined by vi.ai using the domain
    ads: {
-        tag: null,
+        enabled: false,
    },
 };

--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@ -8,6 +8,22 @@

 import utils from '../utils';

+// Build the default tag URL
+const getTagUrl = () => {
+    const params = {
+        AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
+        AV_CHANNELID: '5a0458dc28a06145e4519d21',
+        AV_URL: '127.0.0.1:3000',
+        cb: 1,
+        AV_WIDTH: 640,
+        AV_HEIGHT: 480,
+    };
+
+    const base = 'https://go.aniview.com/api/adserver6/vast/';
+
+    return `${base}?${utils.buildUrlParams(params)}`;
+};
+
 class Ads {
    /**
     * Ads constructor.
@ -16,8 +32,10 @@ class Ads {
     */
    constructor(player) {
        this.player = player;
+        this.enabled = player.config.ads.enabled;
        this.playing = false;
        this.initialized = false;
+        this.blocked = false;
        this.enabled = utils.is.url(player.config.ads.tag);

        // Check if a tag URL is provided.
@ -25,11 +43,19 @@ class Ads {
            return;
        }

-        // Check if the Google IMA3 SDK is loaded
+        // Check if the Google IMA3 SDK is loaded or load it ourselves
        if (!utils.is.object(window.google)) {
-            utils.loadScript(player.config.urls.googleIMA.api, () => {
-                this.ready();
-            });
+            utils.loadScript(
+                player.config.urls.googleIMA.api,
+                () => {
+                    this.ready();
+                },
+                () => {
+                    // Script failed to load or is blocked
+                    this.blocked = true;
+                    this.player.debug.log('Ads error: Google IMA SDK failed to load');
+                },
+            );
        } else {
            this.ready();
        }
@ -122,7 +148,7 @@ class Ads {

            // Request video ads
            const request = new google.ima.AdsRequest();
-            request.adTagUrl = this.player.config.ads.tag;
+            request.adTagUrl = getTagUrl();

            // Specify the linear and nonlinear slot sizes. This helps the SDK
            // to select the correct creative if multiple are returned
@ -155,7 +181,8 @@ class Ads {

        const update = () => {
            const time = utils.formatTime(this.manager.getRemainingTime());
-            this.elements.container.setAttribute('data-badge-text', time);
+            const label = `${this.player.config.i18n.advertisment} - ${time}`;
+            this.elements.container.setAttribute('data-badge-text', label);
        };

        this.countdownTimer = window.setInterval(update, 100);
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@ -51,7 +51,16 @@ const vimeo = {
            gesture: 'media',
        };
        const params = utils.buildUrlParams(options);
-        const id = utils.parseVimeoId(player.media.getAttribute('src'));
+
+        // Get the source URL or ID
+        let source = player.media.getAttribute('src');
+
+        // Get from <div> if needed
+        if (utils.is.empty(source)) {
+            source = player.media.getAttribute(this.config.attributes.embed.id);
+        }
+
+        const id = utils.parseVimeoId(source);

        // Build an iframe
        const iframe = utils.createElement('iframe');
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@ -59,10 +59,10 @@ const youtube = {
        if (utils.is.string(key) && !utils.is.empty(key)) {
            const url = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=${key}&fields=items(snippet(title))&part=snippet`;

-            fetch(url)
-                .then(response => (response.ok ? response.json() : null))
+            utils
+                .fetch(url)
                .then(result => {
-                    if (result !== null && utils.is.object(result)) {
+                    if (utils.is.object(result)) {
                        this.config.title = result.items[0].snippet.title;
                        ui.setTitle.call(this);
                    }
@ -87,8 +87,16 @@ const youtube = {
            return;
        }

+        // Get the source URL or ID
+        let source = player.media.getAttribute('src');
+
+        // Get from <div> if needed
+        if (utils.is.empty(source)) {
+            source = player.media.getAttribute(this.config.attributes.embed.id);
+        }
+
        // Replace the <iframe> with a <div> due to YouTube API issues
-        const videoId = utils.parseYouTubeId(player.media.getAttribute('src'));
+        const videoId = utils.parseYouTubeId(source);
        const id = utils.generateId(player.provider);
        const container = utils.createElement('div', { id });
        player.media = utils.replaceElement(container, player.media);
@ -108,8 +116,8 @@ const youtube = {
                playsinline: 1, // Allow iOS inline playback

                // Tracking for stats
-                origin: window && window.location.hostname,
-                widget_referrer: window && window.location.href,
+                // origin: window ? `${window.location.protocol}//${window.location.host}` : null,
+                widget_referrer: window ? window.location.href : null,

                // Captions are flaky on YouTube
                cc_load_policy: player.captions.active ? 1 : 0,
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.0.0-beta.6
+// plyr.js v3.0.0-beta.12
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -153,50 +153,53 @@ class Plyr {
                // Find the frame
                iframe = this.media.querySelector('iframe');

-                // <iframe> required
-                if (!utils.is.element(iframe)) {
-                    this.debug.error('Setup failed: <iframe> is missing');
-                    return;
+                // <iframe> type
+                if (utils.is.element(iframe)) {
+                    // Detect provider
+                    url = iframe.getAttribute('src');
+                    this.provider = utils.getProviderByUrl(url);
+
+                    // Rework elements
+                    this.elements.container = this.media;
+                    this.media = iframe;
+
+                    // Reset classname
+                    this.elements.container.className = '';
+
+                    // Get attributes from URL and set config
+                    params = utils.getUrlParams(url);
+                    if (!utils.is.empty(params)) {
+                        const truthy = [
+                            '1',
+                            'true',
+                        ];
+
+                        if (truthy.includes(params.autoplay)) {
+                            this.config.autoplay = true;
+                        }
+                        if (truthy.includes(params.playsinline)) {
+                            this.config.inline = true;
+                        }
+                        if (truthy.includes(params.loop)) {
+                            this.config.loop.active = true;
+                        }
+                    }
+                } else {
+                    // <div> with attributes
+                    this.provider = this.media.getAttribute(this.config.attributes.embed.provider);
+
+                    // Remove attribute
+                    this.media.removeAttribute(this.config.attributes.embed.provider);
                }

-                // Audio will come later for external providers
-                this.type = types.video;
-
-                // Detect provider
-                url = iframe.getAttribute('src');
-                this.provider = utils.getProviderByUrl(url);
-
-                // Get attributes from URL and set config
-                params = utils.getUrlParams(url);
-                if (!utils.is.empty(params)) {
-                    const truthy = [
-                        '1',
-                        'true',
-                    ];
-
-                    if (truthy.includes(params.autoplay)) {
-                        this.config.autoplay = true;
-                    }
-                    if (truthy.includes(params.playsinline)) {
-                        this.config.inline = true;
-                    }
-                    if (truthy.includes(params.loop)) {
-                        this.config.loop.active = true;
-                    }
-                }
-
-                // Unsupported provider
+                // Unsupported or missing provider
                if (utils.is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) {
                    this.debug.error('Setup failed: Invalid provider');
                    return;
                }

-                // Rework elements
-                this.elements.container = this.media;
-                this.media = iframe;
-
-                // Reset classname
-                this.elements.container.className = '';
+                // Audio will come later for external providers
+                this.type = types.video;

                break;

@ -306,14 +309,17 @@ class Plyr {
    }

    /**
-     * Play the media, or play the advertisement
+     * Play the media, or play the advertisement (if they are not blocked)
     */
    play() {
-        if (this.ads.enabled && !this.ads.initialized) {
+        // TODO: Always return a promise?
+        if (this.ads.enabled && !this.ads.initialized && !this.ads.blocked) {
            this.ads.play();
+            return null;
        }

-        this.media.play();
+        // Return the promise (for HTML5)
+        return this.media.play();
    }

    /**
@ -556,6 +562,10 @@ class Plyr {
            return true;
        }

+        if (this.isAudio) {
+            return true;
+        }
+
        // Get audio tracks
        return this.media.mozHasAudio || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
    }
--- a/src/js/utils.js
+++ b/src/js/utils.js
@ -9,7 +9,7 @@ const utils = {
    // Check variable types
    is: {
        plyr(input) {
-            return this.instanceof(input, Plyr);
+            return this.instanceof(input, window.Plyr);
        },
        object(input) {
            return this.getConstructor(input) === Object;
@ -81,8 +81,40 @@ const utils = {
        };
    },

+    // Fetch wrapper
+    // Using XHR to avoid issues with older browsers
+    fetch(url) {
+        return new Promise((resolve, reject) => {
+            try {
+                const request = new XMLHttpRequest();
+
+                // Check for CORS support
+                if (!('withCredentials' in request)) {
+                    return;
+                }
+
+                request.addEventListener('load', () => {
+                    try {
+                        resolve(JSON.parse(request.responseText));
+                    } catch(e) {
+                        resolve(request.responseText);
+                    }
+                });
+
+                request.addEventListener('error', () => {
+                    throw new Error(request.statusText);
+                });
+
+                request.open('GET', url, true);
+                request.send();
+            } catch (e) {
+                reject(e);
+            }
+        });
+    },
+
    // Load an external script
-    loadScript(url, callback) {
+    loadScript(url, callback, error) {
        const current = document.querySelector(`script[src="${url}"]`);

        // Check script is not already referenced, if so wait for load
@ -99,6 +131,10 @@ const utils = {
        element.callbacks = element.callbacks || [];
        element.callbacks.push(callback);

+        // Error queue
+        element.errors = element.errors || [];
+        element.errors.push(error);
+
        // Bind callback
        if (utils.is.function(callback)) {
            element.addEventListener(
@ -111,6 +147,16 @@ const utils = {
            );
        }

+        // Bind error handling
+        element.addEventListener(
+            'error',
+            event => {
+                element.errors.forEach(err => err.call(null, event));
+                element.errors = null;
+            },
+            false,
+        );
+
        // Set the URL after binding callback
        element.src = url;

@ -160,10 +206,10 @@ const utils = {
            }

            // Get the sprite
-            fetch(url)
-                .then(response => (response.ok ? response.text() : null))
-                .then(text => {
-                    if (text === null) {
+            utils
+                .fetch(url)
+                .then(result => {
+                    if (utils.is.empty(result)) {
                        return;
                    }

@ -171,12 +217,12 @@ const utils = {
                        window.localStorage.setItem(
                            prefix + id,
                            JSON.stringify({
-                                content: text,
+                                content: result,
                            }),
                        );
                    }

-                    updateSprite.call(container, text);
+                    updateSprite.call(container, result);
                })
                .catch(() => {});
        }
@ -573,7 +619,7 @@ const utils = {
        const event = new CustomEvent(type, {
            bubbles: utils.is.boolean(bubbles) ? bubbles : false,
            detail: Object.assign({}, detail, {
-                plyr: this instanceof Plyr ? this : null,
+                plyr: utils.is.plyr(this) ? this : null,
            }),
        });

@ -606,9 +652,15 @@ const utils = {
    },

    // Time helpers
-    getHours(value) { return parseInt((value / 60 / 60) % 60, 10); },
-    getMinutes(value) { return parseInt((value / 60) % 60, 10); },
-    getSeconds(value) { return parseInt(value % 60, 10); },
+    getHours(value) {
+        return parseInt((value / 60 / 60) % 60, 10);
+    },
+    getMinutes(value) {
+        return parseInt((value / 60) % 60, 10);
+    },
+    getSeconds(value) {
+        return parseInt(value % 60, 10);
+    },

    // Format time to UI friendly string
    formatTime(time = 0, displayHours = false, inverted = false) {
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@ -91,6 +91,21 @@
            @include plyr-tab-focus();
        }
    }
+}
+
+// Video range inputs
+.plyr--full-ui.plyr--video input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background-color: $plyr-video-range-track-bg;
+    }
+
+    &::-ms-track {
+        background-color: $plyr-video-range-track-bg;
+    }

    // Pressed styles
    &:active {
@ -108,21 +123,6 @@
    }
 }

-// Video range inputs
-.plyr--full-ui.plyr--video input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-moz-range-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-
-    &::-ms-track {
-        background-color: $plyr-video-range-track-bg;
-    }
-}
-
 // Audio range inputs
 .plyr--full-ui.plyr--audio input[type='range'] {
    &::-webkit-slider-runnable-track {
@ -136,4 +136,19 @@
    &::-ms-track {
        background-color: $plyr-audio-range-track-bg;
    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+    }
 }
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@ -44,8 +44,8 @@
    width: $plyr-range-thumb-height;
 }

-@mixin plyr-range-thumb-active() {
-    box-shadow: 0 0 0 $plyr-range-thumb-active-shadow-width transparentize($plyr-range-thumb-bg, 0.5);
+@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
+    box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
 }

 // Fullscreen styles
@ -87,6 +87,11 @@
        }
    }

+    // Hide cursor in fullscreen when controls hidden
+    &.plyr--hide-controls {
+        cursor: none;
+    }
+
    // Large captions in full screen on larger screens
    @media (min-width: $plyr-bp-lg) {
        .plyr__captions {
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@ -9,7 +9,7 @@ $plyr-range-thumb-active-shadow-width: 3px !default;
 $plyr-range-thumb-height: 14px !default;
 $plyr-range-thumb-bg: #fff !default;
 $plyr-range-thumb-border: 2px solid transparent !default;
-$plyr-range-thumb-shadow: 0 1px 1px rgba($plyr-video-controls-bg, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
+$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;

 // Track
 $plyr-range-track-height: 6px !default;
@ -21,3 +21,4 @@ $plyr-range-fill-bg: $plyr-color-main !default;
 // Type specific
 $plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
 $plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
+$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;
--- a/yarn.lock
+++ b/yarn.lock
@ -2322,9 +2322,9 @@ gulp-size@^3.0.0:
    stream-counter "^1.0.0"
    through2 "^2.0.0"

-gulp-sourcemaps@^2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.3.tgz#11b033f759f909e0a5f15b7bdf47ac29cc54efa4"
+gulp-sourcemaps@^2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.4.tgz#cbb2008450b1bcce6cd23bf98337be751bf6e30a"
  dependencies:
    "@gulp-sourcemaps/identity-map" "1.X"
    "@gulp-sourcemaps/map-sources" "1.X"
@ -2334,7 +2334,7 @@ gulp-sourcemaps@^2.6.3:
    debug-fabulous "1.X"
    detect-newline "2.X"
    graceful-fs "4.X"
-    source-map "0.X"
+    source-map "~0.6.0"
    strip-bom-string "1.X"
    through2 "2.X"

@ -4553,9 +4553,9 @@ rollup-plugin-babel@^3.0.3:
  dependencies:
    rollup-pluginutils "^1.5.0"

-rollup-plugin-commonjs@^8.2.6:
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.2.6.tgz#27e5b9069ff94005bb01e01bb46a1e4873784677"
+rollup-plugin-commonjs@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.3.0.tgz#91b4ba18f340951e39ed7b1901f377a80ab3f9c3"
  dependencies:
    acorn "^5.2.1"
    estree-walker "^0.5.0"
@ -4791,10 +4791,6 @@ source-map@0.5.x, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6:
  version "0.5.7"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"

-source-map@0.X, source-map@^0.6.1, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-
 source-map@^0.1.38:
  version "0.1.43"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
@ -4807,6 +4803,10 @@ source-map@^0.4.2:
  dependencies:
    amdefine ">=0.0.4"

+source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
 sparkles@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3"
@ -5287,9 +5287,9 @@ uglify-es@^3.3.7:
    commander "~2.13.0"
    source-map "~0.6.1"

-uglify-es@^3.3.8:
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.8.tgz#f2c68e6cff0d0f9dc9577e4da207151c2e753b7e"
+uglify-es@^3.3.9:
+  version "3.3.9"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
  dependencies:
    commander "~2.13.0"
    source-map "~0.6.1"
Author	SHA1	Message	Date
Sam Potts	f67315e20c	3.0.0-beta.12	2018-02-06 00:25:50 +11:00
Sam Potts	2150c44036	Added backwards compatibility for <div> embeds	2018-02-06 00:24:48 +11:00
Sam Potts	70c9fbdde3	Removed fetch dependency	2018-02-05 21:43:32 +11:00
Sam Potts	f3ea31c515	Merge branch 'beta' of github.com:sampotts/plyr into beta # Conflicts: # dist/plyr.js # dist/plyr.js.map	2018-02-05 21:28:16 +11:00
Sam Potts	1ee88cba16	Testing fetch	2018-02-05 21:26:18 +11:00
Sam Potts	af3ae75229	Update readme.md	2018-02-03 23:16:52 +11:00
Sam Potts	d76ef3ff91	Small UI tweaks and fix for instanceof issue	2018-01-31 19:33:00 +11:00
Sam Potts	2691c7c9d6	Version bump + icon fix	2018-01-30 13:01:05 +11:00
Sam Potts	26b1d8ce8f	Fix UMD stuff	2018-01-30 12:57:19 +11:00
Sam Potts	6fae148fc1	Deploy	2018-01-30 09:26:09 +11:00
Sam Potts	bb51647fe2	Merge pull request #772 from sampotts/fix/ads-blocked Fix: ads blocked and media playing before ad plays	2018-01-30 09:22:54 +11:00
Sam Potts	71efbe7a92	Merge branch 'beta' into fix/ads-blocked # Conflicts: # dist/plyr.js # dist/plyr.js.map # src/js/plugins/ads.js # src/js/plyr.js	2018-01-30 09:22:14 +11:00
ferdiemmen	afd695cb39	Fix typo's	2018-01-29 22:45:46 +01:00
ferdiemmen	c4eb4c97ac	fix(ads): Fixes media from playing when ads are blocked	2018-01-29 22:40:08 +01:00
Sam Potts	8f7a8940f3	Version bump	2018-01-25 22:42:52 +11:00
Sam Potts	5e68f8c8dd	Attempt to fix YouTube message error, added ads references, changes to bool	2018-01-25 22:41:30 +11:00
Sam Potts	b4e22e2e7b	Restored “Ad” in label	2018-01-24 09:06:20 +11:00
Sam Potts	d4234da9aa	Docs tweak	2018-01-23 19:13:35 +11:00