JSFiddle - React, Tailwind, and code Playground

HTML

<body>

  <div><img class='myBg' src="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png" alt="" />
    <!--the "poster" is a transparent GIF. You could include it as a data URI to save one HTTP request-->
    <video controls width="100%" height="100%" poster="https://i.stack.imgur.com/PdlGo.gif" 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>

</body>

CSS

video {

  outline: 1px solid red;
}

img.myBg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}

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