YouTube Embed

How to use

<Section columns={1}>
<Markdown>

# YouTube Embed

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

</Markdown>

import YouTube from "~/components/media/videos/YouTube.astro";
import PreviewImage from "~/assets/jpg/mick-nsenga-50XwniKxiXI-unsplash.jpg";

<YouTube
  url="https://www.youtube.com/watch?v=CHSnz0bCaUk"
  title="Example title to display"
  image={{
    src: PreviewImage,
    alt: "Example alt text here",
  }}
/>

</Section>

Props

Prop	Type	Description
image	object	(optional) Image data for the component. See fields below.
imageQuality	string	(optional) YouTube preview image quality. Valid choices are: "max" | "high" | "standard" | "low"
label	string	(optional) Custom screen reader text for the play button, default is “Play video”
params	string	(optional) URL params to customise player. See supported params here
title	string	(optional) The title displayed at the top of the video.
url	string	Can be either a Vimeo video ID or the URL e.g. https://www.youtube.com/watch?v=CHSnz0bCaUk
class	string	(optional) Additional classes applied to the root <div>.
(extends)	HTMLAttributes<"div">	(optional) All standard HTML attributes for a <div>.

image object

• src — ImageMetadata
  The imported image metadata (output from Astro’s image import).
• alt — string
  (optional) Alt text for the image, defaults to empty string "".

More examples