yoko-at-home / greeting-react Goto Github PK

import MP4 from '../img/video.mp4'
import Webm from '../img/video.webm'

 <div className='bg-video'>
        <video className='bg-video__content' autoplay='' muted='' loop=''>
          <source src={MP4} type='video/mp4' />
          <source src={Webm} type='video/webm' />
          Your browser is not supported!
        </video>
      </div>
      <div className='bg-mobile'>
        <div className='bg-mobile__content'>
          <img src={mobileBackGround} alt='Merry Christmas' />
        </div>
      </div>

  .bg-video{
display:none;}
  @media(min-width:374px){
  .bg-video{
  display:block;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index:-1;
  overflow:hidden}
  .bg-video__content{height:100%;
  width:100%;
  -o-object-fit:cover;
  object-fit:cover}
    }