JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<div id="easyCreator">
	<div class="overGrid">
		<a href="#"><img src="https://haluzovic.cz/rollei/easyCreator/hero2.webp"></a>
	</div>
	<div class="grid1 gridItem">
		<video playsinline="true" class="img-fit pointer-events-none" autoplay="autoplay" muted="muted" loop="loop" preload="metadata"><source src="//www.rollei.com/cdn/shop/videos/c/vp/980429a7d00e4f3ea8a15e1a3de37795/980429a7d00e4f3ea8a15e1a3de37795.SD-480p-1.5Mbps-43917685.mp4?v=0" type="video/mp4"><img loading="lazy" hidden="" src="//www.rollei.com/cdn/shop/files/preview_images/980429a7d00e4f3ea8a15e1a3de37795.thumbnail.0000000000_small.jpg?v=1741618577"></video>
	</div>
	<div class="grid2 gridItem">
		<video playsinline="true" class="img-fit pointer-events-none" autoplay="autoplay" muted="muted" loop="loop" preload="metadata"><source src="//www.rollei.com/cdn/shop/videos/c/vp/1f1f33e031384915a37fd9bfefa933ae/1f1f33e031384915a37fd9bfefa933ae.SD-480p-1.5Mbps-43917818.mp4?v=0" type="video/mp4"><img loading="lazy" hidden="" src="//www.rollei.com/cdn/shop/files/preview_images/1f1f33e031384915a37fd9bfefa933ae.thumbnail.0000000000_small.jpg?v=1741618772"></video>
	</div>
	<div class="grid3 gridItem">
		<video playsinline="true" class="img-fit pointer-events-none" autoplay="autoplay" muted="muted" loop="loop" preload="metadata"><source src="//www.rollei.com/cdn/shop/videos/c/vp/15124cc3e0574cc882895e533a1c1a4c/15124cc3e0574cc882895e533a1c1a4c.SD-480p-1.5Mbps-43918165.mp4?v=0" type="video/mp4"><img loading="lazy" hidden="" src="//www.rollei.com/cdn/shop/files/preview_images/15124cc3e0574cc882895e533a1c1a4c.thumbnail.0000000000_small.jpg?v=1741619212"></video>
	</div>
</div>

CSS

#easyCreator {display:grid; position:relative; 
grid-template-areas: 
"video1 video2"
"video1 video3";
grid-template-columns: 65% 35%; row-gap:1em; gap:1em;
height: calc(100% - 30px);
  margin: 15px auto;
  width: calc(100% - 15px);}

@media (max-width:500px) {
	#easyCreator {display:block; position:relative;}
	#easyCreator .grid2,
	#easyCreator .grid3 {display:none}
}	
#easyCreator .grid1 {grid-area: video1}
#easyCreator .grid2 {grid-area: video2}
#easyCreator .grid3 {grid-area: video3}
#easyCreator .gridItem {width:100%;overflow: hidden;  object-fit: cover; border-radius:10px}
#easyCreator .gridItem video {width:100%; height: 100%; overflow: hidden;  object-fit: cover;}
#easyCreator .overGrid { position: absolute; display: flex; top:0; right:0; bottom:0; left:0; justify-content: center; align-items: center; padding: 1em}
#easyCreator .overGrid a { height:100%; display: flex; align-items: center;}
#easyCreator .overGrid img { max-height:100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0 10px black) drop-shadow(0 0 20px black) }

#IntroSekce01 {
  box-shadow: 0 0 33px #222 inset !important;
  display: block !important;
  border-radius: 14px;
}