Using Videos

"Embed this YouTube video in the hero section:
https://youtube.com/watch?v=xxxxx"

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Video title"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
  className="rounded-lg"
/>

<div className="aspect-video">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    className="w-full h-full rounded-lg"
    allowFullScreen
  />
</div>

"Embed this Vimeo video: https://vimeo.com/xxxxx"

<iframe
  src="https://player.vimeo.com/video/VIDEO_ID"
  className="aspect-video w-full rounded-lg"
  allowFullScreen
/>

<video
  src="/demo.mp4"
  controls
  className="w-full rounded-lg"
>
  Your browser doesn't support video.
</video>

<video
  src="/demo.mp4"
  poster="/video-thumbnail.jpg"
  controls
  className="w-full rounded-lg"
/>

<video
  src="/background.mp4"
  autoPlay
  muted
  loop
  playsInline
  className="w-full"
/>

"Create a hero section with a video background,
dark overlay, and centered text"

<div className="relative h-screen">
  <video
    autoPlay
    muted
    loop
    playsInline
    className="absolute inset-0 w-full h-full object-cover"
  >
    <source src="/hero-bg.mp4" type="video/mp4" />
  </video>
  <div className="absolute inset-0 bg-black/50" />
  <div className="relative z-10 flex items-center justify-center h-full">
    <h1 className="text-white text-5xl">Welcome</h1>
  </div>
</div>

// Embed from a video host instead of shipping a large file
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  className="aspect-video w-full rounded-lg"
  allowFullScreen
/>

<video controls>
  <source src="/video.webm" type="video/webm" />
  <source src="/video.mp4" type="video/mp4" />
</video>

"Create a custom video player with play/pause button,
progress bar, and fullscreen toggle"

"Add react-player to handle both YouTube and self-hosted videos"

const [isVisible, setIsVisible] = useState(false);

{isVisible ? (
  <iframe src={videoUrl} />
) : (
  <button onClick={() => setIsVisible(true)}>
    <Image src="/thumbnail.jpg" alt="Play video" />
    <PlayIcon />
  </button>
)}

"Add VideoObject schema markup for the demo video"

<script type="application/ld+json">
{JSON.stringify({
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Product Demo",
  "description": "A demo of our product",
  "thumbnailUrl": "/thumbnail.jpg",
  "uploadDate": "2024-01-15",
  "duration": "PT2M30S"
})}
</script>

<video controls>
  <source src="/video.mp4" type="video/mp4" />
  <track
    kind="captions"
    src="/captions.vtt"
    srcLang="en"
    label="English"
    default
  />
</video>

"Add a transcript below the video that users can expand"

"Create a product demo section with a video on the left
and feature highlights on the right"

"Add a video testimonials carousel with thumbnail previews"

"Create a video tutorial gallery with categories
and search functionality"