Custom Youtube Embed #18
1 changed files with 10 additions and 8 deletions
|
@ -1,7 +1,5 @@
|
||||||
---
|
---
|
||||||
import { YouTube } from '@astro-community/astro-embed-youtube'
|
import { YouTube } from '@astro-community/astro-embed-youtube'
|
||||||
import type { ImageMetadata } from 'astro'
|
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
id: string
|
id: string
|
||||||
thumbnail: string
|
thumbnail: string
|
||||||
|
@ -11,9 +9,7 @@ const { id, thumbnail } = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="youtube-center">
|
<div class="youtube-center">
|
||||||
<noscript
|
<noscript style="display: flex; justify-content: center;">
|
||||||
style="display: flex; justify-content: center;"
|
|
||||||
>
|
|
||||||
<style>
|
<style>
|
||||||
lite-youtube {
|
lite-youtube {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -21,7 +17,7 @@ const { id, thumbnail } = Astro.props
|
||||||
</style>
|
</style>
|
||||||
<div class="warningtext">
|
<div class="warningtext">
|
||||||
<span>
|
<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}`
|
href=`https://www.youtube.com/watch?v=${id}`
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer">watch it on YouTube</a
|
rel="noopener noreferrer">watch it on YouTube</a
|
||||||
|
@ -29,7 +25,7 @@ const { id, thumbnail } = Astro.props
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</noscript>
|
</noscript>
|
||||||
<YouTube id={id} poster={thumbnail}/>
|
<YouTube id={id} poster={thumbnail} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -54,6 +50,12 @@ const { id, thumbnail } = Astro.props
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-top: 10%
|
text-align: center;
|
||||||
|
margin-top: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span > a {
|
||||||
|
font-style: unset;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue