Skip to content

Instantly share code, notes, and snippets.

@jlengstorf

jlengstorf/youtube.astro

Created March 4, 2024 02:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jlengstorf/429a3be362d25fd6ae17103b21fd2aea to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jlengstorf/429a3be362d25fd6ae17103b21fd2aea to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jlengstorf created this gist Mar 4, 2024.
    45 changes: 45 additions & 0 deletions youtube.astro
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    ---
    import 'lite-youtube-embed/src/lite-yt-embed.css';
    export interface Props {
    videoid: string;
    title?: string;
    }
    const { videoid, title } = Astro.props;
    ---

    <div class="video">
    <lite-youtube
    videoid={videoid}
    playlabel={title}
    title={title}
    params="modestbranding=2&rel=0"
    >
    <a
    href={`https://youtube.com/watch?v=${videoid}`}
    class="lty-playbtn"
    title="Play Video"
    >
    <span class="lyt-visually-hidden">Play Video: {title}</span>
    </a>
    </lite-youtube>
    </div>

    <script>
    import 'lite-youtube-embed';
    </script>

    <style>
    .video {
    background: var(--color-indigo);
    border: 0.5rem solid var(--color-indigo);
    border-radius: 1.25rem;
    display: block;
    margin-block-end: -4rem;
    margin-inline: auto;
    overflow: hidden;
    rotate: -0.25deg;
    width: min(90vw, 720px);
    }
    </style>