dark-firepit.cloud/src/routes/videos-of-all-time/+page.svelte

119 lines
2.5 KiB
Svelte

<script>
import Header from "../../lib/Header.svelte";
const videos = [
'void.mp4',
'asmr.mp4',
'geometry_dash_layout.webm',
'wd_gaster_rapping.webm',
'trinkets.mp4',
'car_door.webm',
'eminem_potion.mp4',
'LASIK_eye_surgery.mp4',
'yellow_egg.mp4',
'mab.mp4',
'yipp.mp4',
'just_a_week_away.webm',
'oh_my_lordy_lord.webm',
'toad.mp4',
'crispsy.mp4',
'griddy.mp4',
'soevil.mp4',
'caralarmlayout.mp4',
'the_pizza.mp4',
'wiggles.mp4',
'wake-up.mp4',
'duetto.mp4',
'doyou.mp4',
'canwe.mp4',
'dontlikethisvideo.mp4',
'burgerr.mp4',
'asterisk.mp4',
'bottle_child.mp4',
'diamondtester.mp4',
'twerk.mp4',
'ueeeiin.mp4',
'sunny.mp4',
'itso.mp4',
'my_wii.mp4',
'chips.mp4',
'breakingnews.mp4',
'soup.mp4',
'AA.mp4',
'yay.mp4',
'ghostly_spirit.mp4',
'is_your_family_missing.webm',
'chicken_sandwich.mp4',
'cat.mov',
'hungry.mp4',
'robert.mp4',
'the_horse.mp4'
];
const types = {
'mp4': 'video/mp4',
'webm': 'video/webm',
'mov': 'video/quicktime'
}
</script>
<style>
.video {
border-radius: 10px;
filter: drop-shadow(0px 0px 32px rgba(255, 255, 255, 0.1));
display: flex;
flex-direction: column;
overflow: hidden;
max-width: 100%;
}
.videos {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 1em;
flex-wrap: wrap;
}
.video-label {
padding: 0.5em;
background-color: #eeeeef;
color: #000;
font-weight: bold;
text-align: center;
font-size: large;
}
</style>
<svelte:head>
<title>videos of all time</title>
</svelte:head>
<main style="width: 1100px">
<Header/>
<div class="big paragraph neat-bg-container center">
<div class="neat-bg" style="transform: skewY(1deg)"></div>
videos of all fucking time compilation
</div>
<div class="videos">
{#each videos as vid}
<div class="video">
<!-- svelte-ignore a11y-media-has-caption -->
<video
width="350"
controls="true"
controlslist="disablepictureinpicture nofullscreen noremoteplayback"
disablepictureinpicture="true"
disableremoteplayback="true"
playsinline="true"
preload="metadata">
<source src={'/videos/' + vid} type={types[vid.split('.').pop()]}>
</video>
<div class="video-label">
{vid}
</div>
</div>
{/each}
</div>
</main>