import React from "react";
import game_over_mp4 from "../resources/video/game_over.mp4";
import game_over_webm from "../resources/video/game_over.webm";
import game_over_desktop from "../resources/images/game_over.jpg";
import game_over_mobile from "../resources/images/game_over_mobile.jpg";


export default function Video() {

  return (
    <div>
      {window.innerWidth >= 895 ? (
        <video
          className='videoBackground'
          poster={game_over_desktop}
          autoPlay
          playsInline
          muted
          loop
          preload="auto"
        >
          <source src={game_over_mp4} type="video/mp4" />
          <source src={game_over_webm} type="video/webm" />
          Your browser does not support the video tag!
        </video>
      ) : (
        <video
          className='videoBackground'
          poster={game_over_mobile}
          playsInline
          muted
          loop
          preload="auto"
        >
          <source src={game_over_mp4} type="video/mp4" />
          <source src={game_over_webm} type="video/webm" />
          Your browser does not support the video tag!
        </video>
      )}
    </div>
  )
};
