mirror of
https://github.com/massbug/judge4c.git
synced 2025-05-18 07:16:34 +00:00
feat(mdx/content): add component for embedding YouTube and Bilibili videos
This commit is contained in:
parent
a86a42a483
commit
535d8ec51a
27
src/components/content/video-embed.tsx
Normal file
27
src/components/content/video-embed.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
interface VideoEmbedProps {
|
||||||
|
platform: "youtube" | "bilibili";
|
||||||
|
id: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const platformSrcMap: Record<VideoEmbedProps["platform"], string> = {
|
||||||
|
youtube: "https://www.youtube.com/embed/",
|
||||||
|
bilibili: "https://player.bilibili.com/player.html?bvid=",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function VideoEmbed({
|
||||||
|
platform,
|
||||||
|
id,
|
||||||
|
}: VideoEmbedProps) {
|
||||||
|
const src = platformSrcMap[platform] + id;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<iframe
|
||||||
|
className="aspect-video w-full"
|
||||||
|
src={src}
|
||||||
|
title={`${platform} Video Player`}
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user