Improved custom youtube embed component

This commit is contained in:
Firq 2023-12-29 20:20:08 +01:00
parent 5d1da2d3d8
commit a62a2bb64a
Signed by: Firq
GPG key ID: 4DE1059A4666E89F

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>