video full screen 반응형

사파리와 크롬의 브라운저 엔진 자체의 정책에서 음소거 요소를 추가해 줘야 한다.(자동재생시 제한이 있음)

import React from "react";
import Footer from "../Components/Footer";
import Menubar from "../Components/Menubar";
import Totop from "../Components/Totop";
import "./Main.css";
import mainvideo_sample from "../../assets/images/etc/mainvideo_sample.png";
import project1 from "../../assets/videos/project1.mp4";
export default function Main() {
  return (
    <div
      id="content"
      className="content"
      style={{
        height: "100vh"
        // backgroundColor: "#000"
      }}
    >
      <Menubar slideIndex={0} />
      <Totop />
      <div id="main">
        <video
          controls={false}
          muted={true}
          loop={true}
          autoPlay={true}
          src={project1}
          alt="project1"
        />
      </div>
    </div>
  );
}

#content {
  overflow: hidden;
}
#main {
  position: relative;
  height: 100%;
}

#main video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

@media screen and (max-height: 1018px) {
  #main video {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 1018px;
  }
}