Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 69 Packages Wiki Activity Actions

Custom Youtube Embed #18

Merged
Firq merged 4 commits from dev into main 2023-12-29 19:33:42 +00:00
Conversation 0 Commits 4 Files changed 7 +10 -8
1 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit af83dfa7d8 - Show all commits

18
src/components/youtubeEmbed.astro
View file

@ -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>