47 lines
1.2 KiB
HTML
47 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width initial-scale=1" />
|
|
<meta name="description" content="Waka Laka (for Osaka)" />
|
|
<title>Waka Laka (for Osaka)</title>
|
|
<style>
|
|
html,body {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
* {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
}
|
|
.bg-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
position: fixed;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: contain;
|
|
}
|
|
body {
|
|
background-color: #000000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- TODO: how to autoplay video _without_ it being muted? -->
|
|
<video class="bg-image" id="waka-video" width="1440" height="1080"
|
|
autoplay loop muted
|
|
onclick="document.getElementById('waka-video').muted = !document.getElementById('waka-video').muted;"
|
|
>
|
|
<!-- from https://www.youtube.com/watch?v=ehB_7bBKprY -->
|
|
<!-- original and more info at https://www.aquilinestudios.org/wakalaka.html -->
|
|
<source src="waka.laka.for.osaka.mp4" type="video/mp4">
|
|
</video>
|
|
</body>
|
|
</html>
|