60 lines
1.1 KiB
Text
60 lines
1.1 KiB
Text
|
---
|
||
|
|
import { YouTube } from '@astro-community/astro-embed-youtube'
|
||
|
|
import type { ImageMetadata } from 'astro'
|
||
|
|
|
||
|
|
export interface Props {
|
||
|
|
id: string
|
||
|
|
thumbnail: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const { id, thumbnail } = Astro.props
|
||
|
|
---
|
||
|
|
|
||
|
|
<div class="youtube-center">
|
||
|
|
<noscript
|
||
|
|
style="display: flex; justify-content: center;"
|
||
|
|
>
|
||
|
|
<style>
|
||
|
|
lite-youtube {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="warningtext">
|
||
|
|
<span>
|
||
|
|
To view the video, enable JavaScript or <a
|
||
|
|
href=`https://www.youtube.com/watch?v=${id}`
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer">watch it on YouTube</a
|
||
|
|
>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</noscript>
|
||
|
|
<YouTube id={id} poster={thumbnail}/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.youtube-center {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
lite-youtube {
|
||
|
|
width: 100%;
|
||
|
|
max-height: 360px;
|
||
|
|
max-width: 640px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.warningtext {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
background-color: var(--c-darkgray);
|
||
|
|
width: 640px;
|
||
|
|
height: 360px;
|
||
|
|
}
|
||
|
|
|
||
|
|
span {
|
||
|
|
margin-top: 10%
|
||
|
|
}
|
||
|
|
</style>
|