JSFiddle - React, Tailwind, and code Playground

by lmeurs

HTML

<body>
  <section id="ofc">
    <h1>
      <code>object-fit: cover</code>
    </h1>
    <div>
      <video controls width="100%" height="100%" poster="https://www.mycoa.nl/sites/default/files/styles/xs/public/paddestoelenklein.png?itok=x837aqvG" style="">
        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
        <source src="https://dl5.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" />
      </video></div>
  </section>
  <hr>
  <section id="off">
    <h1>
      <code>object-fit: fill</code>
    </h1>
    <div>
      <video controls width="100%" height="100%" poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png" style="">
        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
        <source src="https://dl5.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" />
      </video></div>

  </section>
</body>

CSS

video {
  outline: 1px solid red;
}

#ofc video {
  object-fit: cover;
}

#off video {
  object-fit: fill;
}



/*For better visibility*/
body {
  margin: 10px
}