created: 20211105010816701
modified: 20211105021159297
tags: 
title: Custom pause/play button on video

<style>
iframe{
aspect-ratio: 16/9;
width:100%;
border:0;
}
</style>

<iframe loading="lazy" class=tw-background allow="autoplay" srcdoc="""
<style>
html{
cursor:pointer;
}
body{
margin:0;
width:100vw;
height:100vh;
display:grid;
place-content:center;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position:fixed;
    z-index:-1;
}

.play-button{
width: 100px;
height: 100px;
background-size: 8px;
background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="red" width="22pt" height="22pt"><svg width="22pt" height="22pt" class="tc-image-video tc-image-button" viewBox="0 0 128 128"><path fill-rule="evenodd" d="M64 12c-34.91 0-55.273 2.917-58.182 5.833C2.91 20.75 0 41.167 0 64.5c0 23.333 2.91 43.75 5.818 46.667C8.728 114.083 29.091 117 64 117c34.91 0 55.273-2.917 58.182-5.833C125.09 108.25 128 87.833 128 64.5c0-23.333-2.91-43.75-5.818-46.667C119.272 14.917 98.909 12 64 12zm-9.084 32.618c-3.813-2.542-6.905-.879-6.905 3.698v31.368c0 4.585 3.099 6.235 6.905 3.698l22.168-14.779c3.813-2.542 3.806-6.669 0-9.206L54.916 44.618z"/></svg></svg>');
}

.play-button.pause{
background: center / contain no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="red" width="22pt" height="22pt"><svg width="22pt" height="22pt" class="tc-image-timestamp-off tc-image-button" viewBox="0 0 128 128"><g fill-rule="evenodd"><path d="M58.25 11C26.08 11 0 37.082 0 69.25s26.08 58.25 58.25 58.25c32.175 0 58.25-26.082 58.25-58.25S90.425 11 58.25 11zm0 100.5C34.914 111.5 16 92.586 16 69.25 16 45.92 34.914 27 58.25 27s42.25 18.92 42.25 42.25c0 23.336-18.914 42.25-42.25 42.25zM49.704 10a5 5 0 010-10H66.69a5 5 0 015 5c.006 2.757-2.238 5-5 5H49.705z"/><path d="M58.25 35.88c-18.777 0-33.998 15.224-33.998 33.998 0 18.773 15.22 34.002 33.998 34.002 18.784 0 34.002-15.23 34.002-34.002 0-18.774-15.218-33.998-34.002-33.998zm-3.03 50.123H44.196v-34H55.22v34zm16.976 0H61.17v-34h11.025v34z"/></g></svg></svg>');
}

.play-button:not(.pause){
opacity:0;
transition: all .1s ease-out;
}

body:hover .play-button:not(.pause){
opacity:1;
}

</style>
<video autoplay muted loop playsinline preload=Metadata poster="http://placekitten.com/1920/1080">
  <source src="https://i.imgur.com/8EjcHkv.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<div class="play-button"></div>
<script>
var track = document.querySelector('video');
var pauseBtn = document.querySelector('.play-button');
    function playPause() {
        if (track.paused) {
            track.play();
            pauseBtn.classList.remove("pause");
        } else { 
            track.pause();
            pauseBtn.classList.add("pause");
        }
    }
    
    document.addEventListener("click", playPause);
    track.addEventListener("ended", function() {
      pauseBtn.classList.toggle("play");
    });
</script>
"""/>