JSFiddle - React, Tailwind, and code Playground

by davorpeic

HTML

<script>
	var videoList = [
	{
  	size: 'S',
  	video: "https://val-temp.s3.eu-central-1.amazonaws.com/early-booking-demo-S-580-360.mp4",
    image: "https://val-temp.s3.eu-central-1.amazonaws.com/early-booking-demo-S-580-360.jpg"
  },
  {
  	size: 'M',
  	video: "https://val-temp.s3.eu-central-1.amazonaws.com/early-booking-demo-M-992-600.mp4",
    image: "https://val-temp.s3.eu-central-1.amazonaws.com/early-booking-demo-M-992-600.jpg"
  },
  {
  	size: 'L',
  	video: "https://val-temp.s3.eu-central-1.amazonaws.com/early-booking-demo-L-1200-550.mp4",
    image: "https://val-temp.s3.eu-central-1.amazonaws.com/early-booking-demo-L-1200-550.jpg"
  },
  {
  	size: 'XL',
  	video: "https://val-temp.s3.eu-central-1.amazonaws.com/early-booking-demo-XL-1920-600.mp4",
    image: "https://val-temp.s3.eu-central-1.amazonaws.com/early-booking-demo-XL-1920-600.jpg"
  }
];
</script>
<section class="half-size-header half-size-header--video">
    <div class="container-fluid">
        <div class="row">            
            <div data-id="inject-video"></div>        
        </div>
   </div>
</section>

JavaScript

function generateVideoTags() {
	if(typeof videoList !== 'undefined' && $('[data-id="inject-video"]').length > 0) {
  	var videoTag = videoList[0];
    var selectedVideoLayout = 'S';
    if($(window).width() >= 768 ) videoTag = videoList[1]; selectedVideoLayout = videoTag.size;
    if($(window).width() >= 992 ) videoTag = videoList[2]; selectedVideoLayout = videoTag.size;
    if($(window).width() >= 1200 ) videoTag = videoList[3]; selectedVideoLayout = videoTag.size;
    console.log(selectedVideoLayout, videoTag.size);
    if(selectedVideoLayout != videoTag.size){
    
      var videoTemplate = `<video playsinline autoplay muted loop><source src="${videoTag.video}" type="video/mp4"><img src="${videoTag.image}"></video>`;
      $('[data-id="inject-video"]').html(videoTemplate);
    }
    
  }
	
}

generateVideoTags();
$(window).on('resize', function () {
	generateVideoTags();
});