Using PLYR for Youtube videos - poster image?

Question

I am using Plyr (https://github.com/sampotts/plyr) to play Youtube videos inline. But i now want to add a poster to the player, so i can use a thumbnail for the video, before it plays.

Plyr supports this, but i can not get it to work. I am currently using Plyr in its most simple form:

Youtube video: <div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>

Initialize Plyr: <script>plyr.setup();</script>

Thats it. How can i get the above snippet to show a poster for "/myposter.png"?

Answer 1

Here is some example to achieve youtube video custom cover image:

player.poster = '../Images/landing/attendance/Admin Back.png';

example

or

var player = new Plyr('#vid'); setTimeout(() => { player.poster = 'http://ichef.bbci.co.uk/images/ic/640x360/p03hj5f7.jpg'; }, 500)

or

you can read this article A Better Method for Embedding YouTube Videos on your Website