119 lines
2.5 KiB
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>
|