The Run Down
So I have a fullscreen video that I want to play, I have tried doing the following:
Autoplay - only works like 10% of the time
Button: Button is unclickable and won't update according to the css (My problem)
What I'm trying to achieve
Im trying to make - The button goes into the center that says "Click here to enter site" and upon clicking it the video will play and the button will disappear.
HTML
<head>
<title>Spiccy</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<button type="button" onclick="playVideo()" type="button">Click to enter</button>
<video id="myVid">
<source src="enter.mp4" type="video/mp4">
Sorry, your browser does not support HTML5 video.
</video>
<script>
var myVideo = document.getElementById("myVid");
function playVideo() {
myVideo.play();
}
</script>
</body>
<body>
<div class="wrapper">
<pre>
SSSSSSSSSSSSSSS iiii SSSSSSSSSSSSSSS ffffffffffffffff
SS:::::::::::::::S i::::i SS:::::::::::::::S f::::::::::::::::f
S:::::SSSSSS::::::S iiii S:::::SSSSSS::::::S f::::::::::::::::::f
S:::::S SSSSSSS S:::::S SSSSSSS f::::::fffffff:::::f
S:::::S ppppp ppppppppp iiiiiii cccccccccccccccc ccccccccccccccccyyyyyyy yyyyyyy S:::::S mmmmmmm mmmmmmm uuuuuu uuuuuu rrrrr rrrrrrrrr f:::::f ffffffssssssssss
S:::::S p::::ppp:::::::::p i:::::i cc:::::::::::::::c cc:::::::::::::::c y:::::y y:::::y S:::::S mm:::::::m m:::::::mm u::::u u::::u r::::rrr:::::::::r f:::::f ss::::::::::s
S::::SSSS p:::::::::::::::::p i::::i c:::::::::::::::::c c:::::::::::::::::c y:::::y y:::::y S::::SSSS m::::::::::mm::::::::::mu::::u u::::u r:::::::::::::::::r f:::::::ffffff ss:::::::::::::s
SS::::::SSSSS pp::::::ppppp::::::p i::::i c:::::::cccccc:::::cc:::::::cccccc:::::c y:::::y y:::::y SS::::::SSSSS m::::::::::::::::::::::mu::::u u::::u rr::::::rrrrr::::::rf::::::::::::f s::::::ssss:::::s
SSS::::::::SS p:::::p p:::::p i::::i c::::::c cccccccc::::::c ccccccc y:::::y y:::::y SSS::::::::SS m:::::mmm::::::mmm:::::mu::::u u::::u r:::::r r:::::rf::::::::::::f s:::::s ssssss
SSSSSS::::S p:::::p p:::::p i::::i c:::::c c:::::c y:::::y y:::::y SSSSSS::::S m::::m m::::m m::::mu::::u u::::u r:::::r rrrrrrrf:::::::ffffff s::::::s
S:::::Sp:::::p p:::::p i::::i c:::::c c:::::c y:::::y:::::y S:::::Sm::::m m::::m m::::mu::::u u::::u r:::::r f:::::f s::::::s
S:::::Sp:::::p p::::::p i::::i c::::::c cccccccc::::::c ccccccc y:::::::::y S:::::Sm::::m m::::m m::::mu:::::uuuu:::::u r:::::r f:::::f ssssss s:::::s
SSSSSSS S:::::Sp:::::ppppp:::::::pi::::::ic:::::::cccccc:::::cc:::::::cccccc:::::c y:::::::y SSSSSSS S:::::Sm::::m m::::m m::::mu:::::::::::::::uur:::::r f:::::::f s:::::ssss::::::s
S::::::SSSSSS:::::Sp::::::::::::::::p i::::::i c:::::::::::::::::c c:::::::::::::::::c y:::::y S::::::SSSSSS:::::Sm::::m m::::m m::::m u:::::::::::::::ur:::::r f:::::::f s::::::::::::::s
S:::::::::::::::SS p::::::::::::::pp i::::::i cc:::::::::::::::c cc:::::::::::::::c y:::::y S:::::::::::::::SS m::::m m::::m m::::m uu::::::::uu:::ur:::::r f:::::::f s:::::::::::ss
SSSSSSSSSSSSSSS p::::::pppppppp iiiiiiii cccccccccccccccc cccccccccccccccc y:::::y SSSSSSSSSSSSSSS mmmmmm mmmmmm mmmmmm uuuuuuuu uuuurrrrrrr fffffffff sssssssssss
p:::::p y:::::y
p:::::p y:::::y
p:::::::p y:::::y
p:::::::p y:::::y
p:::::::p yyyyyyy
ppppppppp
</pre>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
font-family: "Brandon Light";
color: white;
user-select: none;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
pre {
margin: 0;
padding: 0;
padding-bottom: 550px;
text-align: center;
color: transparent;
background-image: linear-gradient(to left, #f00, #ff0, #0ff, #0f0, #00f);
-webkit-background-clip: text;
animation: animate 5s linear infinite;
-webkit-background-size: 500%;
background-size: 500%;
outline: 5;
}
@keyframes animate{
0%
{
background-position: 0% 100%;
}
50%
{
background-position: 100% 0%;
}
100%
{
background-position: 0% 100%;
}
}
#myVid {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
opacity: 0.4;
}
.button {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
