Plyr Video Player on Gatsby

I want to add plyr video player with selected options below to my gatsby blog. It takes video url from fetched json file. I just tried to add markdown it directly but it sometimes loading, sometimes not. Fetched url is changing from post to post.


<video id="player" playsinline controls ></video>
<script src=""></script>
var controls =['play-large', 'rewind','play','fast-forward','progress','current-time','duration','mute','volume','settings','pip', 'airplay','download','fullscreen'];
var player = new Plyr('#player', { controls });
  .then(resp => resp.json())
  .then( data => {
    player.source = {
      type: 'video',
      title: data[0].label,
      sources: [
          src: data[0].file,
          type: data[0].type,
          size: 720,

Json Data


31 thoughts on “Plyr Video Player on Gatsby”

  1. Pingback: priligy sale usa
  2. Hey there I am so glad I found your weblog, I really found you by accident, while I was searching on Bing for something else, Nonetheless I
    am here now and would just like to say cheers for a fantastic post and a all
    round interesting blog (I also love the theme/design), I don’t have time to read it
    all at the moment but I have bookmarked it and also added in your RSS feeds, so when I have time
    I will be back to read much more, Please do keep up the superb b.


Leave a Comment