ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add support for YouTube's hl param

Browse Source
This commit is contained in:
Léo Renaud-Allaire
2018-07-24 16:36:25 -04:00
parent 544ab0086b
commit 671325dd17
3 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
readme.md
View File

@ -80,7 +80,7 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
</audio> </audio>
``` ```
For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the default `<iframe>` embeds. Below are some examples. The `plyr__video-embed` classname will make the embed responsive. You can add the `autoplay`, `loop` and `playsinline` (YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the `origin` should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it. For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the default `<iframe>` embeds. Below are some examples. The `plyr__video-embed` classname will make the embed responsive. You can add the `autoplay`, `loop`, `hl` (YouTube only) and `playsinline` (YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the `origin` should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it.
#### YouTube embed #### YouTube embed

1
src/js/plugins/youtube.js
View File

@ -188,6 +188,7 @@ const youtube = {
videoId, videoId,
playerVars: { playerVars: {
autoplay: player.config.autoplay ? 1 : 0, // Autoplay autoplay: player.config.autoplay ? 1 : 0, // Autoplay
hl: player.config.hl, // iframe interface language
controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
rel: 0, // No related vids rel: 0, // No related vids
showinfo: 0, // Hide info showinfo: 0, // Hide info

3
src/js/plyr.js
View File

@ -171,7 +171,7 @@ class Plyr {
this.elements.container.className = ''; this.elements.container.className = '';
// Get attributes from URL and set config // Get attributes from URL and set config
if (url.searchParams.length) { if (url.search.length) {
const truthy = ['1', 'true']; const truthy = ['1', 'true'];
if (truthy.includes(url.searchParams.get('autoplay'))) { if (truthy.includes(url.searchParams.get('autoplay'))) {
@ -185,6 +185,7 @@ class Plyr {
// YouTube requires the playsinline in the URL // YouTube requires the playsinline in the URL
if (this.isYouTube) { if (this.isYouTube) {
this.config.playsinline = truthy.includes(url.searchParams.get('playsinline')); this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
this.config.hl = url.searchParams.get('hl');
} else { } else {
this.config.playsinline = true; this.config.playsinline = true;
} }