Custom Youtube Embed #18

Merged
Firq merged 4 commits from dev into main 2023-12-29 19:33:42 +00:00
Showing only changes of commit af83dfa7d8 - Show all commits

View file

@ -1,7 +1,5 @@
---
import { YouTube } from '@astro-community/astro-embed-youtube'
import type { ImageMetadata } from 'astro'
export interface Props {
id: string
thumbnail: string
@ -11,9 +9,7 @@ const { id, thumbnail } = Astro.props
---
<div class="youtube-center">
<noscript
style="display: flex; justify-content: center;"
>
<noscript style="display: flex; justify-content: center;">
<style>
lite-youtube {
display: none;
@ -21,7 +17,7 @@ const { id, thumbnail } = Astro.props
</style>
<div class="warningtext">
<span>
To view the video, enable JavaScript or <a
To view the video, enable JavaScript or<br /><a
href=`https://www.youtube.com/watch?v=${id}`
target="_blank"
rel="noopener noreferrer">watch it on YouTube</a
@ -29,7 +25,7 @@ const { id, thumbnail } = Astro.props
</span>
</div>
</noscript>
<YouTube id={id} poster={thumbnail}/>
<YouTube id={id} poster={thumbnail} />
</div>
<style>
@ -54,6 +50,12 @@ const { id, thumbnail } = Astro.props
}
span {
margin-top: 10%
text-align: center;
margin-top: 20%;
}
span > a {
font-style: unset;
font-weight: bold;
}
</style>