How to embed the video player in React

Embed Javascript Based Code in React

import React, { useEffect } from 'react';

const VideoEmbed = () => {
  useEffect(() => {
    // Create script element and add to the DOM
    const script = document.createElement('script');
    script.src = 'https://embed.dyntube.com/v1.0/dyntube.js';
    script.async = true;
    document.body.appendChild(script);

    // Clean up the script on component unmount
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div>
      <h1>Embedded Video</h1>
      {/* Dyntube embed div */}
      <div data-dyntube-key="Q2rVFPmBlUKujzxXBJ3faw"></div>
    </div>
  );
};

export default VideoEmbed;

Embed Iframe Code in React

import React from 'react';

const VideoEmbed = () => {
  return (
    <div
      style={{
        position: 'relative',
        width: '100%',
        overflow: 'hidden',
        paddingTop: '57.25%',
      }}
    >
      <iframe
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          bottom: 0,
          right: 0,
          width: '100%',
          height: '100%',
          border: 'none',
        }}
        allow="autoplay; fullscreen"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        src="https://videos.dyntube.com/iframes/Q2rVFPmBlUKujzxXBJ3faw"
        title="Caminandes USE"
      ></iframe>
    </div>
  );
};

export default VideoEmbed;