Skip to content

Instantly share code, notes, and snippets.

@jtsternberg

jtsternberg/video-overlay-click-play.html

Created November 18, 2021 19:31
Show Gist options
  • Save jtsternberg/f71596acc95e4c5007198d18d89ed138 to your computer and use it in GitHub Desktop.
Save jtsternberg/f71596acc95e4c5007198d18d89ed138 to your computer and use it in GitHub Desktop.
Download ZIP
Image placeholder overlay over video, click to play
Raw
video-overlay-click-play.html
<html>
<head>
<style>
.placeholder {
position: relative;
display: inline-block;
}
.placeholder:not(.placeholder-hide):after {
background: rgba(255,255,255,.8) url("https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg") no-repeat center center;
background-size: 120px;
display: inline-block;
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div
class="placeholder"
onclick="this.classList.add('placeholder-hide');this.children[0].play()"
>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment