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

Improved custom youtube embed component
All checks were successful
/ checking (push) Successful in 51s
Details
/ build-site (push) Successful in 1m58s
Details
/ publish (push) Successful in 8s
Details
/ unlighthouse (push) Successful in 31s
Details
/ deploy-unlighthouse-files (push) Successful in 14s
Details
/ deploy-unlighthouse-site (push) Successful in 8s
Details

Browse source
This commit is contained in:
Firq 2023-12-29 20:20:08 +01:00
parent 5d1da2d3d8
commit af83dfa7d8
Signed by: Firq
GPG key ID: 4DE1059A4666E89F
1 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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