47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
import { Modal } from "antd"
|
|
import { useState } from "react"
|
|
|
|
|
|
const VideoPopUp = ({children, url}) => {
|
|
|
|
const [popUpOpen, setPopUpOpen] = useState(false)
|
|
|
|
|
|
const handleVideoOpen = () => {
|
|
setPopUpOpen(true)
|
|
}
|
|
|
|
const handleVideoClose = (event) => {
|
|
event.stopPropagation()
|
|
|
|
setPopUpOpen(false)
|
|
}
|
|
|
|
return (
|
|
<div onClick={handleVideoOpen} >
|
|
{children}
|
|
|
|
<Modal title={"demo"}
|
|
style={{ zIndex: 14000, gap: '5px', placeContent: "center", }}
|
|
className="max-xl:tw-max-w-full max-lg:!tw-max-h-[450px]"
|
|
styles={{body: {height: "80vh", width: "100%"}, content: {width: "100%",}}}
|
|
onCancel={handleVideoClose}
|
|
centered
|
|
onOk={handleVideoClose}
|
|
footer={null}
|
|
width={'90%'}
|
|
height={1000}
|
|
open={popUpOpen}>
|
|
<div className="tw-mt-5 tw-text-lg tw-min-w-[350px] tw-rounded-md tw-overflow-hidden tw-h-full tw-w-full ">
|
|
<iframe src="https://www.youtube.com/embed/MkeMv0X-w_4?si=lJNCB18a2XKdY7Y6"
|
|
className="tw-w-full tw-h-full"
|
|
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
|
|
</iframe>
|
|
</div>
|
|
</Modal>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default VideoPopUp |