Created
March 4, 2024 02:26
-
-
Save jlengstorf/429a3be362d25fd6ae17103b21fd2aea to your computer and use it in GitHub Desktop.
working Astro code for using Paul Irish's lite-youtube-embed in a component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
--- | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment