JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
<!-- 

1) Is "data-show-controls='rewind'" the same as data-repeat="true"?
2) We use "data-show-controls" in 2 different ways, should we change this.
3) Data-video_id is confusing , can we align this with all other attributes like data-video-id 

! data-controls should overrule data-hide-control-elements

Example how it could look like:

-->
<script 
	src="https://quadia-jw-player.web-staging.eu/quadia.player.min.js"
	data-version="latest"
	data-video-id="1030156" // or data-video-url


	data-hide-control-elements=" " // scrub,playpause,rewind,volume,timestamp,share,quality,fullscreen - default empty 

	data-controls="true" // true/false  - default true
	data-allow-fullscreen="true" // true/false  - default true
	data-autoplay="false" // true/false  - default false
	data-mute="false" // true/false  - default false
	data-volume="75" // 0-100  - default 75
></script>

  </body>
  
  
</html>