28 lines
816 B
JavaScript
28 lines
816 B
JavaScript
import React from "react"
|
|
|
|
import { MediaPlayer, MediaProvider } from "@vidstack/react"
|
|
import {
|
|
DefaultAudioLayout,
|
|
defaultLayoutIcons,
|
|
DefaultVideoLayout
|
|
} from "@vidstack/react/player/layouts/default"
|
|
import "@vidstack/react/player/styles/base.css"
|
|
|
|
export default function YouTubeFrame({ video, width, height }) {
|
|
return (
|
|
<MediaPlayer
|
|
className="w-full aspect-video bg-slate-900 bg-base-content font-sans overflow-hidden rounded-xl ring-media-focus data-[focus]:ring-4"
|
|
title="Sprite Fight"
|
|
src="youtube/KCHnP62DWpg"
|
|
controls
|
|
>
|
|
<MediaProvider />
|
|
<DefaultAudioLayout icons={defaultLayoutIcons} />
|
|
<DefaultVideoLayout
|
|
icons={defaultLayoutIcons}
|
|
thumbnails="https://media-files.vidstack.io/thumbnails.vtt"
|
|
/>
|
|
</MediaPlayer>
|
|
)
|
|
}
|