YouTube façade as a React component with Tailwind styling

you_tube_video.js

import React, { useState } from "react"
import { Helmet } from "react-helmet"

// Lazy loads a YouTube video by showing the thumbnail
// as a facade.
//
// Inspired by: @justinribeiro/lite-youtube
//
const YouTubeVideo = ({ videoId, title }) => {
    const [connectionsLoaded, setConnectionsLoaded] = useState(false)
    const [videoLoaded, setVideoLoaded] = useState(false)

    const webpThumbnail = `https://i.ytimg.com/vi_webp/${videoId}/maxresdefault.webp`
    const jpegThumbnail = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`

    return (
        <div
            className="relative w-full my-6 transition duration-75 ease-in cursor-pointer youtube-video text-youtube-gray hover:text-youtube-red"
            style={{
                paddingBottom: "56.25%" /* 16:9 */,
                height: "0",
            }}
            onClick={videoLoaded ? null : () => setVideoLoaded(true)}
            onKeyDown={videoLoaded ? null : () => setVideoLoaded(true)}
            onMouseEnter={
                connectionsLoaded ? null : () => setConnectionsLoaded(true)
            }
        >
            {/* Preconnect the thumbnail host. */}
            <Helmet>
                <link
                    crossOrigin
                    rel="preconnect"
                    href="https://i.ytimg.com/"
                />
            </Helmet>

            {/* Preconnect the video hosts. */}
            {connectionsLoaded ? (
                <Helmet>
                    <link
                        crossOrigin
                        rel="preconnect"
                        href="https://s.ytimg.com"
                    />
                    <link
                        crossOrigin
                        rel="preconnect"
                        href="https://www.youtube.com"
                    />
                    <link
                        crossOrigin
                        rel="preconnect"
                        href="https://www.google.com"
                    />
                </Helmet>
            ) : null}

            {/* Show the video thumbnail until the iframe should be loaded. */}
            {videoLoaded ? (
                <iframe
                    style={{
                        position: "absolute",
                        top: 0,
                        left: 0,
                        width: "100%",
                        height: "100%",
                    }}
                    src={`https://www.youtube.com/embed/${videoId}/?modestbranding=1&rel=0&autoplay=1&playsinline=1&muted=1`}
                    title={title}
                    frameBorder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                ></iframe>
            ) : (
                <>
                    <picture>
                        <source type="image/webp" srcSet={webpThumbnail} />
                        <source type="image/jpeg" srcSet={jpegThumbnail} />
                        <img
                            referrerPolicy="origin"
                            src={jpegThumbnail}
                            alt={`Play ${title}`}
                        />
                    </picture>
                    <button
                        className="absolute"
                        style={{
                            height: "48px",
                            width: "68px",
                            top: "50%",
                            left: "50%",
                            marginLeft: "-34px",
                            marginTop: "-24px",
                            outline: "none",
                        }}
                        aria-label={`Play ${title}`}
                    >
                        {/* YouTube's Play Button SVG */}
                        <svg
                            height="100%"
                            version="1.1"
                            viewBox="0 0 68 48"
                            width="100%"
                        >
                            <path
                                d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
                                fill="currentColor"
                            ></path>
                            <path d="M 45,24 27,14 27,34" fill="#fff"></path>
                        </svg>
                    </button>
                </>
            )}
        </div>
    )
}

export default YouTubeVideo