src/Components/YoutubeC.jsx

import React from "react";
import YouTube from "react-youtube";

function YoutubeC({ videoId, navigate }) {
	const [player, setPlayer] = React.useState(null);

	const handleClick = () => {
		console.log("Clicked");
		if (player) {
			player.seekTo(120);
			player.pauseVideo();
			console.log("Seeking to  120");
		}
	};

	const onPlayerReady = (event) => {
		setPlayer(event.target);
		console.log("Player is ready");
	};

	return (
		<div className="w-full h-96">

			<h1 className="text-gray-800 font-semibold text-2xl ml-2 mt-2">

				Youtube Video

			</h1>



			<YouTube

				className="w-full h-full p-2"

				videoId={videoId}

				opts={{

					width: "100%",

					height: "100%",

					playerVars: {

						autoplay: 0,

						start: 40,

					},

				}}

				onReady={onPlayerReady}

			/>



			<div className="flex justify-center items-center mt-2">

				<button

					className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg"

					onClick={handleClick}

				>

					Take me to Quiz

				</button>

			</div>

		</div>
	);
}

export default YoutubeC;