3

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"?

beaver
  • 17,333
  • 2
  • 40
  • 66
brother
  • 7,651
  • 9
  • 34
  • 58

2 Answers2

6

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

shamim khan
  • 467
  • 7
  • 24
-3

Just use the poster attribute on html5 video tag:

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

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

PabloWeb18
  • 413
  • 3
  • 9