import LiteYouTubeEmbed from "react-lite-youtube-embed";
import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
import useHost from "@/hooks/use-host.hook";

const router = useRouter();
const host = useHost();
const isLive = host === "hyte.com";

<style jsx global>{`
  ${!isLive &&
  `.yt-lite:before {
      background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Blackpink_PUBG_210321.jpg/2560px-Blackpink_PUBG_210321.jpg");
      height: 100%;
      background-size: cover; /* Or use 'contain' if you want to see the entire image */
      background-position: center; /* Adjust as needed */
      background-repeat: no-repeat;
  }
  `}
`}</style>

<LiteYouTubeEmbed
    id={videoId}
    src="https://youtu.be/tV5PHCrZXOw?t=1"
    adNetwork={false}
    playlist={false}
    title="GREAT"
    noCookie={true}
  />
</div>

import LiteYouTubeEmbed from "react-lite-youtube-embed";
import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
import useHost from "@/hooks/use-host.hook";
import { useNextSanityImage } from "next-sanity-image";
import { useContext } from "react";
import PRODUCT_STATE from "@/util/react-context/product-state";
import classname from "classnames";
export default function YoutubeContent({ data }) {
  const { header, url } = data;
  const regex =
    /(https?:\/\/)?(((m|www)\.)?(youtube(-nocookie)?|youtube.googleapis)\.com.*(v\/|v=|vi=|vi\/|e\/|embed\/|user\/.*\/u\/\d+\/)|youtu\.be\/)([_0-9a-z-]+)/i;

  const videoId = url.match(regex)[8];

  const [, isLive] = useHost();
  const sanityAsset = data?.overlayImage?.asset

  const {
    sanityEnv: { projectId, dataset },
  } = useContext(PRODUCT_STATE);
  const sanityImage = sanityAsset && useNextSanityImage(
    { projectId, dataset },
    data.overlayImage.asset
  );

  return (
    // Specific formula to keep Youtube embed responsive
    // See https://css-tricks.com/fluid-width-video/
    <section className="my-xxxl youtube-section max-md" key={data._key}>
      <style jsx global>{`
        ${sanityImage &&
        `.video-${videoId}:before {
                background-image: url("${sanityImage.src}");
                height: 100%;
                background-size: cover; /* Or use 'contain' if you want to see the entire image */
                background-position: center; /* Adjust as needed */
                background-repeat: no-repeat;
            }
        `}
      `}</style>

      <h2>{header}</h2>
      {/* https://github.com/ibrahimcesar/react-lite-youtube-embed */}
      <LiteYouTubeEmbed
        id={videoId}
        wrapperClass={classname("yt-lite", `video-${videoId}`)}
        adNetwork={false}
        playlist={false}
        title={header}
        noCookie={true}
      />
    </section>
  );
}