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

Merge pull request #1120 from didacte/add-missing-youtube-hl-param

Browse Source 
Add support for YouTube's hl param
This commit is contained in:
Sam Potts 2018-07-26 00:03:10 +10:00 committed by GitHub
commit 71578e07ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 2 deletions
Show Stats 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;
} }