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 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>
|
||||
|
|
Loading…
Reference in a new issue