Embed Youtube Video Circle Bottom Left Tailwind

Embed Youtube Video Circle Bottom Left Tailwind

    const [playingDemo, setPlayingDemo] = useState(0)

    const [scrollTop, setScrollTop] = useState(0);

    const [loaded, setLoaded] = useState(false)

    useEffect(() => {
        const onScroll = (e) => {
            setScrollTop(e.target.documentElement.scrollTop);
        };
        window.addEventListener("scroll", onScroll);

        return () => window.removeEventListener("scroll", onScroll);
    }, [scrollTop]);

    useEffect(() => {
        if (window != null) {

            window.addEventListener('blur', function () {
                if (document.activeElement.id == 'mini-demo') {
                    setPlayingDemo(1)
                }
            });
        }

    }, [])
    

<div className={`fixed left-2 bottom-2 z-50 ${((scrollTop > 10) && (loaded))  ? "opacity-100" : "opacity-0"}`}>
                <div className={`relative flex border-4 border-red-500 rounded-full`} style={{width: 200, height: 200}}>

                    <img
                        className={`${(playingDemo === 1) && "opacity-0"} rounded-full object-cover absolute w-full h-full`}
                        src={`https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5eeea355389655.59822ff824b72.gif`}
                        alt="Gif"
                    />

                    <iframe
                        onLoad={() => {
                            setLoaded(true)
                        }}
                        id={`mini-demo`}
                        className={`${(playingDemo !== 1) ? "opacity-5" : "opacity-100"} rounded-full object-cover absolute w-full h-full`}
                        src={`https://www.youtube-nocookie.com/embed/FaGjgqKXPo4?&autoPlay=0&showinfo=0&mute=0&loop=1&color=white&controls=1&modestbranding=0&playsinline=1&rel=0&enablejsapi=1`}
                        title="YouTube video player"
                        frameBorder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; encrypted-media; gyroscope; picture-in-picture"
                        allowFullScreen/>

                </div>
            </div>