Skip to content

Instantly share code, notes, and snippets.

@zhuangya

zhuangya/funny-error.html

Created July 28, 2017 10:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zhuangya/ef3da77a4afae0d2d063d01589dd4d0b to your computer and use it in GitHub Desktop.
Save zhuangya/ef3da77a4afae0d2d063d01589dd4d0b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
funny-error.html
<style>
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
}
body {
display: flex;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
h1 {
color: white;
}
</style>
<body>
<h1>Damn!</h1>
<div id="stage">
</div>
<script>
fetch('https://api.giphy.com/v1/gifs/random?api_key=3c9d64a40d894884a3c08d5ea27ddadf&tag=oops&rating=G').then(resp => resp.json()).then(({ data: { image_mp4_url } }) => {
document.getElementById('stage').innerHTML = `
<video src="${image_mp4_url}" autoplay loop></video>
`;
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment