How to improve performance when rendering YouTube videos in NextJS with Sanity

import YouTubeEmbed from "./YouTubeEmbed";
import getYouTubeID from "get-youtube-id";

export const RichTextComponents = {
  types: {
    image: ({ value }: any) => {
      return (
        <div className="relative w-full h-96 m-10 mx-auto">
          <Image
            className="object-contain"
            src={urlFor(value).url()}
            alt="Blog Post Image"
            fill
          />
        </div>
      );
    },
    youtube: ({ value }: any) => {
      const id = getYouTubeID(value.url);
      return id ? <YouTubeEmbed id={id} /> : null;
    },
  },

import React from "react";

type YouTubeEmbedProps = {
  id: string;
};

const YouTubeEmbed: React.FC<YouTubeEmbedProps> = ({ id }) => (
  <div className="youtube-player mt-8 mb-8 justify-center flex">
    <iframe
      width="560"
      height="315"
      src={`<https://www.youtube.com/embed/${id}>`}
      title="YouTube video player"
      frameBorder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowFullScreen
    ></iframe>
  </div>
);

export default YouTubeEmbed;