74 lines
1.8 KiB
Svelte
74 lines
1.8 KiB
Svelte
<script>
|
|
import Header from "../../lib/Header.svelte";
|
|
|
|
/** @type {import('./$types').PageData} */
|
|
export let data;
|
|
</script>
|
|
|
|
<style>
|
|
.video {
|
|
border-radius: 10px;
|
|
box-shadow: 0px 0px 32px rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
}
|
|
video {
|
|
width: 350px;
|
|
height: auto;
|
|
}
|
|
.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 Object.values(data) as vid}
|
|
<div class="video">
|
|
<!-- svelte-ignore a11y-media-has-caption -->
|
|
<video
|
|
width={vid.width}
|
|
height={vid.height}
|
|
controls="true"
|
|
controlslist="disablepictureinpicture nofullscreen noremoteplayback"
|
|
disablepictureinpicture="true"
|
|
disableremoteplayback="true"
|
|
playsinline="true"
|
|
preload="metadata">
|
|
<source src={'/videos/' + vid.name} type={vid.mime}>
|
|
</video>
|
|
<div class="video-label">
|
|
{vid.name}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<br><br>
|
|
<button on:click={() => {document.querySelectorAll('video').forEach(v => {v.play(); v.loop = true; v.volume = Math.random() * v.volume})}} class="center">Play every video at the same time</button>
|
|
</main> |