JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div class="embed-responsive embed-responsive-16by9">
	
    <video controls muted autoplay loop controlsList="nodownload" id="cnc-video" class="h-auto">
      <source src="https://www.screwfix.com//images/general/assets/html/cnc.mp4" type="video/mp4">
   </video>

</div>

 
<style>

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%
}

.embed-responsive-16by9::before {
  padding-top: 56.25%
}

.embed-responsive-4by3::before {
  padding-top: 75%
}

.embed-responsive-1by1::before {
  padding-top: 100%
}

</style>


<script>

// add src to video element based on data-src attribute

//document.addEventListener("DOMContentLoaded", function() {

    var videoPlaceholder = jQuery('#cnc-video');
    
    videoPlaceholder.volume=1;
    
    
	
	if (videoPlaceholder.muted) {
    	videoPlaceholder.muted = false;
	} else {
		videoPlaceholder.muted = true;
	}
	
    videoPlaceholder.click();


//});

</script>