93 lines
1.9 KiB
JavaScript
93 lines
1.9 KiB
JavaScript
"use client";
|
||
|
||
const ModalVideo = ({ videoId, isOpen, setIsOpen, src }) => {
|
||
const closeModal = () => setIsOpen(false);
|
||
|
||
return (
|
||
<>
|
||
<div
|
||
style={{
|
||
...overlayStyle,
|
||
visibility: isOpen ? "visible" : "hidden",
|
||
opacity: isOpen ? 1 : 0,
|
||
}}
|
||
onClick={closeModal}
|
||
>
|
||
<div style={modalStyle} onClick={(e) => e.stopPropagation()}>
|
||
<button onClick={closeModal} style={closeButtonStyle}>
|
||
×
|
||
</button>
|
||
<div style={responsiveIframeContainerStyle}>
|
||
<iframe
|
||
src={
|
||
src
|
||
? src
|
||
: `https://www.youtube.com/embed/${videoId}?autoplay=1`
|
||
}
|
||
title="YouTube video player"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
allowFullScreen
|
||
style={iframeStyle}
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
// Styles
|
||
|
||
const overlayStyle = {
|
||
position: "fixed",
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
zIndex: 1008,
|
||
transition: "0.4s",
|
||
};
|
||
|
||
const modalStyle = {
|
||
position: "relative",
|
||
width: "90%",
|
||
maxWidth: "1100px",
|
||
backgroundColor: "#fff",
|
||
borderRadius: "4px",
|
||
overflow: "hidden",
|
||
boxShadow: "0px 0px 15px rgba(0, 0, 0, 0.2)",
|
||
};
|
||
|
||
const closeButtonStyle = {
|
||
position: "absolute",
|
||
top: "-5px",
|
||
right: "10px",
|
||
fontSize: "30px",
|
||
background: "transparent",
|
||
border: "none",
|
||
color: "#fff",
|
||
cursor: "pointer",
|
||
zIndex: 1001,
|
||
};
|
||
|
||
const responsiveIframeContainerStyle = {
|
||
position: "relative",
|
||
paddingBottom: "56.25%", // 16:9 aspect ratio
|
||
height: 0,
|
||
overflow: "hidden",
|
||
};
|
||
|
||
const iframeStyle = {
|
||
position: "absolute",
|
||
top: 0,
|
||
left: 0,
|
||
width: "100%",
|
||
height: "100%",
|
||
};
|
||
|
||
export default ModalVideo;
|