JSFiddle - React, Tailwind, and code Playground

by scurrilus

HTML

<link rel="stylesheet" href="https://www.morgenpost.de/resources/1540298521/css/styles.min.css" type="text/css">
<div class="video video-brightcove">
	<div class="video__content">
		<div class="player_brightcove_rendered" style="display: block; position: relative; margin-bottom:10px; width: 100%; padding-bottom: 56.25%;">
			<div class="player-wrapper">
			<input id="vjs-playlist-4627439626001" class="vjs-playlist--checkbox" type="checkbox" checked="">
				<video id="video-4627439626001" style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;" data-account="4332409863001" data-player="SJkJKNdsx" data-embed="default" controls="" class="vjs-tech" data-playlist-id="4627439626001" data-ima3-params='{"{fdp_dfp_iu_dfp_sitename}":"sta_morgenpost","{fdp_dfp_iu_dfp_zone}":"other","{correlator}":"792348","{owner}":"sta_morgenpost","{source}":"https://www.morgenpost.de/","{ttID}":"4627439626001","{artikeltyp}":"news","{loknewsid}":"215675117","{lokseite}":"vt_vermischtes","{loktitel}":"bmo","{lokverz1}":"vermischtes","{lokverz2}":"","{lokverzn}":"","{iu}":"/39216077/sta_morgenpost/other/preroll","{sz}":"640x480","{url}":"https%3A%2F%2Fwww.morgenpost.de%2Fvermischtes%2Farticle215675117%2FLokfuehrer-verhindert-schweres-Unglueck-am-Hambacher-Forst.html","{descriptionUrl}":"https%3A%2F%2Fwww.morgenpost.de%2F","{custParams}":"owner%3Dsta_morgenpost%26source%3Dhttps%3A%2F%2Fwww.morgenpost.de%2F%26ttID%3D4627439626001%26cue%3Dpre%26artikeltyp%3Dnews%26pos%3Dpreroll%26loknewsid%3D215675117%26lokseite%3Dvt_vermischtes%26loktitel%3Dbmo%26lokverz1%3Dvermischtes%26lokverz2%3D%26lokverzn%3D%26videotags%3DbrightcovePlayer.mediainfo.tags"}' playsinline="playsinline" preload="none" muted="muted" tabindex="-1" autoplay="" data-data-layer='{"videoId": "4627439626001", "accountId": "4332409863001", "playerId": "SJkJKNdsx", "publication": "bmo", "position": "section", "siteid": "something", "referenceid": "MerkelNachfolger_ZRO_29102018", "pgname":...

SCSS

.video-js .vjs-custom-interface {
	color: #cc0000;
}

.video-js .vjs-custom-interface ul {
	list-style: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.video-js.not-hover .vjs-custom-interface,
.video-js.vjs-ima3-not-playing-yet .vjs-custom-interface {
	display: none;
}

.video-js .vjs-custom-interface .vjs-custom-interface-item {
	color: #fff;
	backgound: #cc0000;
	margin-bottom: 0.25rem;
	display: block;
	cursor: pointer;
	
	&[data-autoplay="true"] {
		color: green;
	}
	
	&[data-autoplay="false"] {
		color: red;
	} 
	
	&:hover {
		color: #cc0000;
	}
}

JavaScript

// BC CS: Nfa4ITL0m7hg7k9H91JfRi-l-AZNiOTBjx0RvlLlRIZYrGy6GYAYjaKvBQg7C-Uqydm2CoHSdJSvpSsz6MMkkw
// BC CID: 9f636393-71dd-4cc7-8a7a-b74a4972bd5f
// Init player
/**
 * string: id of the video player
 * cb
 */
 function bcPlayer (htmlVideoId) {
  // Dataset has the info. Extra it
  const videoElement = document.getElementById(htmlVideoId);

  // check if it exist
  
	if(!videoElement) {
    return;
  }
	
  // Build the config obj
	
	const config = {
		videoElementId: videoElement.id,
		accountId: videoElement.dataset.account,
		playerId: videoElement.dataset.player,
		videoId: videoElement.dataset.videoId || videoElement.dataset.playlistId,
		ima3Params: JSON.parse(videoElement.dataset.ima3Params),
		dataLayer: JSON.parse(videoElement.dataset.dataLayer),
		interface: JSON.parse(videoElement.dataset.interface),
	}
  
	// Push the info to the bcScriptLoad
  bcPlayerScriptLoad(config);
}

var dataLayer = []; // Remove this because of global dataLayer var
function bcPlayerDataLayerValues(config) {
	// console.log("Test", config.dataLayer.videoId, config.dataLayer.event, config.dataLayer);
	const dataLayerValue = dataLayer.push(
		config.dataLayer
	);
	return dataLayerValue;
}

function bcPlayerInterface(config, brightcovePlayer) {
	// Interface Item State
	
	const setItemState = (el, name, val, callback) => {
			console.log(el, name, val);
			el.dataset[`${name}`] = val;
			localStorage.setItem(`bcPlayer_${name}`, val);
	}
	
	// Interface Item Action
	
	const clickInterfaceItem = (name, callback) => {
		if (localStorage.getItem(`bcPlayer_${name}`) === null) {
			localStorage.setItem(`bcPlayer_${name}`, 'true');
		}

		document.querySelector(`#${config.videoElementId} .vjs-custom-interface-item--${name}`).addEventListener('click', function (event) {
				event.preventDefault();
				setItemState(this, name, this.dataset[`${name}`])
				if (this.dataset[`${name}`] === 'true') {
					setItemState(this, name, 'false');
				}
				else {
					setItemState(this, name,...