Developed own component to wrap youtube-lite (adds placeholder when JS is off)
This commit is contained in:
parent
cb8b53ea63
commit
5d1da2d3d8
3 changed files with 61 additions and 16 deletions
59
src/components/youtubeEmbed.astro
Normal file
59
src/components/youtubeEmbed.astro
Normal 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>
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue