Plyr: Poster image for youtube-videos

[mbar196]

Should it be possible to use poster-images with youtube-videos? I tried it and the poster-image shows, but when I click play, the youtube-video does not load. With a local video, the poster-image works fine.

Thanks
Michael

[sampotts]

Really this is managed on YouTube but I might be able to work something out in a future version.

[mbar196]

Dear Sam

I forgot to include the use cases:

In our rather large governmental organisation most of the employees cannot
access youtube - management decision :-(
The plattform ist completey blocked on the firewall, so they see errors on
our own website, when a youtube-video ist embedded. A poster-image would be
nicer than an error-message, after the player I would additionally offer a
link to a local mp4-version of the youtube-video.

My other thougts were some sort of easy branding - for very short videos we
avoid special lead and credits with logo and so on.
And a better control over the preview-image, than on youtube would be nice.

Thanks

Michael

2016-07-05 7:20 GMT+02:00 Sam Potts [email protected]:

Really this is managed on YouTube but I might be able to work something
out in a future version.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/Selz/plyr/issues/294#issuecomment-230389582, or mute
the thread
https://github.com/notifications/unsubscribe/ABVlN7gwY78L7lpfVljcRsihLLWCrk20ks5qSemxgaJpZM4JA-Bv
.

[ghost]

+1
I totally agree that it would be amazing if it's possible to set a poster image. Maybe through "data-poster" attribute. This also solves the issue that the YouTube-Play-Button is still visible behind the Plyr-Play-Button.

Could be done something like this:
<div onclick="play();" id="vidwrap" style="height:315px;width:560px;background: black url('http://img.youtube.com/vi/ueP-sPcgooI/maxresdefault.jpg') no-repeat center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;overflow:hidden;cursor:pointer;"></div><script type="text/javascript">function play(){document.getElementById('vidwrap').innerHTML = '<iframe width="560" height="315" src="http://www.youtube.com/embed/QH2-TGUlwu4?controls=0" frameborder="0"></iframe>';}</script>

[intelligence]

+1

Might even have the actual Youtube iframe load on demand like:
http://www.labnol.org/internet/light-youtube-embeds/27941/

[matuzo]

Are there plans for this feature? Is there any way I can help?

[jonnitto]

Some time ago, I made a player for Neos, where I load the iframe on demand: https://github.com/jonnitto/Jonnitto.PrettyEmbedYoutube/blob/master/Resources/Private/Javascripts/Embed.js If I can help @SamPotts , let me know

[arkid]

+1 for this feature. Agreed it can be handled in YouTube but the power to override that would be very useful. To give an example scenario, my client has videos he wants to show on his site but the videos are stuck on the account of the company that produced the videos for him and are being very slow about updating the thumbnails to his preference.

[friday]

Plyr now has a poster element and automatically sets it for youtube. You can set it after creating the instance with instance.poster = ..., but if you run this too soon after the original poster is created then it will be ignored. Should be pretty easy to support setting a custom youtube poster though.

Example:
http://jsfiddle.net/fgegfjp7/1/

[ghost]

@friday
can this be set for vimeo as well?

[friday]

@LittleHamster Yes. The method is there and work regardless as long as it's video.

[friday]

Closing since the main work has been done. Created a new issue #1018 for using custom posters for YouTube/Vimeo.