JSFiddle - React, Tailwind, and code Playground

by yasemin CerrahoÄźlu

HTML

<link rel="stylesheet" href="https://cdn.plyr.io/2.0.7/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.7/demo.css">
<script src="https://cdn.plyr.io/2.0.7/plyr.js"></script>
<div class="container">
  <video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin>
    <!-- Video files -->
    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
    <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">

    <!-- Text track file -->
    <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>

    <!-- Fallback for browsers that don't support the <video> element -->
    <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
  </video>
</div>

CSS

/* This is purely for the demo */
.container {
  max-width: 800px;
  margin: 0 auto;
}
.plyr {
  border-radius: 4px;
  margin-bottom: 15px;
}
.brand {
position:absolute;
bottom:10%;
right:0;
color:#fff;
padding:20px;
}
.button {
position:absolute;
top:0;
right:0;
color:#fff;
padding:20px;
}
.plyr--hide-controls .title {
    opacity: 0;
    pointer-events: none;
}
.plyr--hide-controls .button {
    opacity: 1;
    pointer-events: none;
}

JavaScript

//following defines the custom controls html.  note the first two divs are not standard, but are included to take advantage of the control hiding
var controls = ["<div class='brand'>",
					"This is brand img",
				"</div>",
	"<div class='button'>",
		"<button type='button' class='btn btn-secondary'>This is a button</button>",
	"</div>",
	"<div class='plyr__controls'>",
    "<button type='button' data-plyr='play'>",
        "<svg><use xlink:href='#plyr-play'></use></svg>",
        "<span class='plyr__sr-only'>Play</span>",
    "</button>",
    "<button type='button' data-plyr='pause'>",
        "<svg><use xlink:href='#plyr-pause'></use></svg>",
        "<span class='plyr__sr-only'>Pause</span>",
    "</button>",
    "<span class='plyr__time'>",
        "<span class='plyr__sr-only'>Current time</span>",
        "<span class='plyr__time--current'>00:00</span>",
    "</span>",
    "<span class='plyr__progress'>",
        "<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
        "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>",
        "<progress class='plyr__progress--played' max='100' value='0' role='presentation'></progress>",
        "<progress class='plyr__progress--buffer' max='100' value='0'>",
            "<span>0</span>% buffered",
        "</progress>",
        "<span class='plyr__tooltip'>00:00</span>",
    "</span>",
    "<span class='plyr__time'>",
        "<span class='plyr__sr-only'>Duration</span>",
        "<span class='plyr__time--duration'>00:00</span>",
    "</span>",
    "<button type='button' data-plyr='mute'>",
        "<svg class='icon--muted'><use xlink:href='#plyr-muted'></use></svg>",
        "<svg><use xlink:href='#plyr-volume'></use></svg>",
        "<span class='plyr__sr-only'>Toggle Mute</span>",
    "</button>",
    "<span class='plyr__volume'>",
        "<label for='volume{id}' class='plyr__sr-only'>Volume</label>",
        "<input id='volume{id}'...