YouTube Provider

[mihar-22]

We'll be adding the YouTube provider to ensure we reach feature parity with Vime/Plyr. I've mentioned many times that I'm not a fan of these embeds as they're very limited and suck for both devs and users, but it's more important we don't leave anyone behind who wants to migrate over from Vime/Plyr.

We'll add support for detecting and loading YouTube videos via the player src attribute. Examples:

• src="youtube/DyTCOwB0DVw"
• src="https://www.youtube.com/watch?v=DyTCOwB0DVw"
• src="https://www.youtube-nocookie.com/watch?v=DyTCOwB0DVw"
• src="https://www.youtube.com/embed/DyTCOwB0DVw"
• src="https://youtu.be/DyTCOwB0DVw"

The embed can be configured via the provider change event:

function onProviderChange(provider) {
  if (isYouTubeProvider(provider)) {
    // configure it here
  }
}

❓ When will it be ready?

It'll be ready before we officially announce 1.0. It should be within the month.

[PWaddict]

@mihar-22 don't forget the youtube-nocookie.com

[mihar-22]

Yep noted, thank you @PWaddict!

[wplit]

Good call bringing YT/Vimeo back into the equation.

BTW I had been using Plyr recently, as I needed the YouTube embed. I noticed that the YouTube branding is always visible when the video is played, and there wasn't any built-in options to remove. I worked on it for a while this week and came up with solutions for completely hiding the branding, I think many others will find useful..

Just thought I'd mention incase it makes sense to add it into Vidstack. The two parts of it are..

• Hiding the youtube logo, title, and vid recommendations at the bottom etc - this can be done by changing the height on the iframe to 200% and vertically aligning with top -50%. This pushes the YouTube stuff out of view while still being able to see the full video.

• Hiding the recommended videos at the end - simply reshowing the poster image on the 'ended' event, to cover it.

if you wanted to see an example, let me know and I'll create a live example.

[mihar-22]

Thanks for the suggestions @wplit, I'll look into it!

[wplit]

Just one last request while this is still being implemented.

(I'm guessing this was already going to be the case, given how it already works, but mentioning just in case.)

That no connection is made to Youtube/Vimeo at all if using the 'custom' loading option, even the poster image. Not until we run the player.startLoading(). This would be ideal to cover the cases where user permission is needed.

[Thomasfds]

Good call bringing YT/Vimeo back into the equation.

BTW I had been using Plyr recently, as I needed the YouTube embed. I noticed that the YouTube branding is always visible when the video is played, and there wasn't any built-in options to remove. I worked on it for a while this week and came up with solutions for completely hiding the branding, I think many others will find useful..

Just thought I'd mention incase it makes sense to add it into Vidstack. The two parts of it are..

• Hiding the youtube logo, title, and vid recommendations at the bottom etc - this can be done by changing the height on the iframe to 200% and vertically aligning with top -50%. This pushes the YouTube stuff out of view while still being able to see the full video.
• Hiding the recommended videos at the end - simply reshowing the poster image on the 'ended' event, to cover it.

if you wanted to see an example, let me know and I'll create a live example.

I have try your solution on Plyr.io, that work but that need good video format else video is cut in bottom or top.. :x

[forhadcp]

Did the YouTube embed feature release yet?