Developed own component to wrap youtube-lite (adds placeholder when JS is off)
All checks were successful
/ publish (push) Successful in 1m19s
/ checking (push) Successful in 1m3s
/ build-site (push) Successful in 2m10s

This commit is contained in:
Firq 2023-12-29 20:02:58 +01:00
parent cb8b53ea63
commit 5d1da2d3d8
Signed by: Firq
GPG key ID: 4DE1059A4666E89F
3 changed files with 61 additions and 16 deletions

View file

@ -0,0 +1,59 @@
---
import { YouTube } from '@astro-community/astro-embed-youtube'
import type { ImageMetadata } from 'astro'
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 <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 {
margin-top: 10%
}
</style>

View file

@ -120,18 +120,6 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
color: orange; color: orange;
} }
article :global(.youtube-center) {
width: 100%;
display: flex;
justify-content: center;
}
article :global(.youtube-center) :global(lite-youtube) {
width: 100%;
max-height: 360px;
max-width: 640px;
}
@media (min-width: 1000px) { @media (min-width: 1000px) {
article { article {
margin-left: 10rem; margin-left: 10rem;

View file

@ -6,8 +6,8 @@ description: 'Blog post talking about instant death in FGO, how you can take adv
author: 'Firq' author: 'Firq'
tags: ['fgo', 'games'] tags: ['fgo', 'games']
--- ---
import { YouTube } from '@astro-community/astro-embed-youtube';
import thumbnail from "../../assets/thumbnails/UwbNp_dB_VU.jpg" import thumbnail from "../../assets/thumbnails/UwbNp_dB_VU.jpg"
import YoutubeEmbed from "../../components/youtubeEmbed.astro"
> **Disclaimer**<br/> > **Disclaimer**<br/>
> While writing this, Requiem and I faced a bit of a challenge concerning death rate calculations. Case in point is the passive "Item Construction" > While writing this, Requiem and I faced a bit of a challenge concerning death rate calculations. Case in point is the passive "Item Construction"
@ -105,9 +105,7 @@ For other skill levels, this looks like this (_Her S1 scales from 50% to 100%_)
In the end, this resulted in the following comp that worked like a charm. In the end, this resulted in the following comp that worked like a charm.
<div class="youtube-center"> <YoutubeEmbed id="UwbNp_dB_VU" thumbnail={thumbnail.src}/>
<YouTube id="UwbNp_dB_VU" poster={thumbnail.src}/>
</div>
## Conclusion ## Conclusion