nguyencongpc_nextjs/src/app/pages/Article/HomeArticlePage/BoxVideoArticle/index.tsx

import Link from 'next/link';
import { FaYoutube } from 'react-icons/fa6';
import { DataListArticleVideo } from '@/data/article/ListAricleVideo';
import Image from 'next/image';
import useFancybox from '@/hooks/useFancybox';

export const BoxVideoArticle = () => {
  const getYoutubeEmbedUrl = (url: string): string => {
    try {
      const urlObj = new URL(url);
      // nếu là link youtube dạng watch?v=...
      if (urlObj.hostname.includes('youtube.com')) {
        const videoId = urlObj.searchParams.get('v');
        if (videoId) {
          return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
        }
      }
      // nếu là link youtu.be/xxxx
      if (urlObj.hostname.includes('youtu.be')) {
        const videoId = urlObj.pathname.replace('/', '');
        if (videoId) {
          return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
        }
      }
      // fallback: trả về chính url
      return url;
    } catch {
      return url;
    }
  };

  const [fancyboxRef] = useFancybox({
    closeButton: 'auto',
    dragToClose: true,
  });

  return (
    <div className="box-video-article boder-radius-10">
      <div className="title-video-article flex justify-between">
        <p className="title font-bold">Youtube channel</p>
        <Link
          href="https://www.youtube.com/c/NGUYENCONGPC"
          className="follow-youtube flex items-center gap-2"
        >
          <FaYoutube />
          <span className="font-bold">Theo dõi trên YouTube</span>
        </Link>
      </div>
      <div className="list-video-article flex justify-between gap-2">
        <div className="box-left" ref={fancyboxRef}>
          {DataListArticleVideo.slice(0, 1).map((item, index) => (
            <div className="item-article-video d-flex w-50 gap-10" key={index}>
              <Link
                href={getYoutubeEmbedUrl(item.external_url)}
                className="img-article img-article-video boder-radius-10 relative"
                data-fancybox
              >
                <Image
                  src={item.image.original}
                  width={430}
                  height={310}
                  className="boder-radius-10"
                  alt={item.title}
                />

                <i className="sprite sprite-big-play-video-article icon-play"></i>
                <Image
                  className="icon-play-small"
                  src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/small-play-youtube.png"
                  alt="play"
                  width={58}
                  height={41}
                />
              </Link>
              <Link
                href={getYoutubeEmbedUrl(item.external_url)}
                className="title-article-video flex-1"
                data-fancybox
              >
                {item.title}
              </Link>
            </div>
          ))}
        </div>
        <div className="box-right grid grid-cols-2 gap-2">
          {DataListArticleVideo.slice(1, 7).map((item, index) => (
            <div className="item-article-video flex w-50 gap-2" key={index}>
              <Link
                href={getYoutubeEmbedUrl(item.external_url)}
                className="img-article img-article-video boder-radius-10 relative"
                data-fancybox
              >
                <Image
                  src={item.image.original}
                  width={430}
                  height={310}
                  className="boder-radius-10"
                  alt={item.title}
                />

                <i className="sprite sprite-big-play-video-article icon-play"></i>
                <Image
                  className="icon-play-small"
                  src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/small-play-youtube.png"
                  alt="play"
                  width={58}
                  height={41}
                />
              </Link>
              <Link
                href={getYoutubeEmbedUrl(item.external_url)}
                className="title-article-video flex-1"
                data-fancybox
              >
                {item.title}
              </Link>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};