Firq
af83dfa7d8
All checks were successful
/ checking (push) Successful in 51s
/ build-site (push) Successful in 1m58s
/ publish (push) Successful in 8s
/ unlighthouse (push) Successful in 31s
/ deploy-unlighthouse-files (push) Successful in 14s
/ deploy-unlighthouse-site (push) Successful in 8s
62 lines
1.1 KiB
Text
62 lines
1.1 KiB
Text
---
|
|
import { YouTube } from '@astro-community/astro-embed-youtube'
|
|
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<br /><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 {
|
|
text-align: center;
|
|
margin-top: 20%;
|
|
}
|
|
|
|
span > a {
|
|
font-style: unset;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|