position: absolute로 설정한 DOM을 클릭할 수 없는 문제

/* eslint-disable jsx-a11y/media-has-caption */
import React from "react";

import { SoundButtonContainer } from "../SoundButtonContainer";

export const ShareFeedPage = () => {
  return (
    <div
      id="video-container"
      style={{
        position: "relative",
        maxWidth: "500px",
        maxHeight: "100vh",
        overflow: "hidden",
        width: "100%",
        margin: "auto",
      }}
    >
//.wrapper {
//  position: absolute;
//  top: 53px;
//  left: 16px;
//}

      <SoundButtonContainer />
      <video
        muted
        autoPlay
        loop
        style={{
          width: "100%",
          height: "auto",
          maxWidth: "500px",
          pointerEvents: "none",
        }}
      >
        <source
          src="https://assets.mixkit.co/videos/preview/mixkit-portrait-of-a-fashion-woman-with-silver-makeup-39875-large.mp4"
          type="video/mp4"
        />
      </video>
    </div>
  );
};

video 위에 button을 absolute 설정으로 올려두었는데 클릭할 수 없는 문제가 생겼었음.

문제는 video가 항상 click 이벤트를 가로채고 있기 때문인 것으로 보였음.

video태그에 pointerEvnets: 'none' 설정을 해서 클릭이벤트를 더이상 video에서 인지하지 않도록 수정하여 구현 완료되었음