JSFiddle - React, Tailwind, and code Playground

by vadimkot

HTML

<div class="outer">
      <video loop muted="" autoplay="autoplay" playsinline="playsinline" class="vid" poster="http://media.w3.org/2010/05/sintel/poster.png">
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp" type="video/mp4">
   <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
        <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'/>
  </video>


</div>

CSS

.outer {
  width: 100%;
  height: 150px;
  border: 2px solid red;
}
.vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
}