``` ### Sass You can use `plyr.scss` file included in `/src/sass` as part of your build and change variables to suit your design. The Sass requires you to use [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) (you should be already!) as all declarations use the W3C definitions. The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS you write. Check out the JavaScript source for more on this. ## SVG The icons used in the Plyr controls are loaded in an SVG sprite. The sprite is automatically loaded from our CDN by default. If you already have an icon build system in place, you can include the source plyr icons (see `/src/sprite` for source icons). ### Using the `iconUrl` option You can however specify your own `iconUrl` option and Plyr will determine if the url is absolute and requires loading by AJAX/CORS due to current browser limitations or if it's a relative path, just use the path directly. If you're using the `` tag on your site, you may need to use something like this: [svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2) More info on SVG sprites here: [http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/) and the AJAX technique here: [http://css-tricks.com/ajaxing-svg-sprite/](http://css-tricks.com/ajaxing-svg-sprite/) ## Cross Origin (CORS) You'll notice the `crossorigin` attribute on the example `

` wrapper for embeds. #### Multiple players You have two choices here. You can either use a simple array loop to map the constructor: ```js const players = Array.from(document.querySelectorAll('.js-player')).map((p) => new Plyr(p)); ``` ...or use a static method where you can pass a [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement), or a [JQuery](https://jquery.com) object: ```js const players = Plyr.setup('.js-player'); ``` Both options will also return an array of instances in the order of they were in the DOM for the string selector or the source NodeList or Array. #### Options The second argument for the constructor is the [options](#options) object: ```js const player = new Plyr('#player', { title: 'Example Title', }); ``` Options can be passed as an object to the constructor as above or as JSON in `data-plyr-config` attribute on each of your target elements: ```html

### Financial Contributors Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/plyr/contribute)] #### Individuals

#### Organizations Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/plyr/contribute)]