I am using 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"?

I am using Plyr (https://github./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"?

• javascript
• jquery
• video
• youtube
• plyr.js

2 Answers 2

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

Just use the poster attribute on html5 video tag:

<video poster="/myposter.png" controls>

check out at https://github./sampotts/plyr#html