Skip to content

Instantly share code, notes, and snippets.

@delvinkrasniqi

delvinkrasniqi/Video Player with custom play button

Created March 20, 2020 12:05
Show Gist options
  • Save delvinkrasniqi/426b7c0c3f39526d42debdd34fdf8f2a to your computer and use it in GitHub Desktop.
Save delvinkrasniqi/426b7c0c3f39526d42debdd34fdf8f2a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Video Player with custom play button
<script>
var playButton = document.getElementById("play_button");
var playcircle =document.getElementsByClassName(".svg-wrap")
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
document.getElementById("svg-wrap").style.visibility = "hidden";
// Update the button text to 'Pause'
// playButton.innerHTML = "Pause";
} else {
// Pause the video
video.pause();
document.getElementById("svg-wrap").style.visibility = "visible";
// Update the button text to 'Play'
// playButton.innerHTML = "Play";
}
});
</script>
<html>
<div class="video" id="play_button">
<video width="100%" height="560px" id="video">
<source src="<?php the_field('video');?>" type="video/mp4">
<source src="<?php the_field('video');?>" type="video/ogg">
Your browser does not support the video tag.
</video>
<div class="svg-wrap" id="svg-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="29" viewBox="0 0 19 29">
<defs>
<style>
.cls-1 {
fill: #fff;
fill-rule: evenodd;
}
</style>
</defs>
<path id="arrow" class="cls-1" d="M757,2306.5L738,2292v29l19-14.5"
transform="translate(-738 -2292)" />
</svg>
</div>
</div>
</html>
<css>
.video{
position: relative;
video{
outline: none !important;
}
.svg-wrap{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 70px;
height: 70px;
background-color: #10c981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
-webkit-box-shadow: 8px 7px 46px -15px rgba(0,0,0,0.75);
-moz-box-shadow: 8px 7px 46px -15px rgba(0,0,0,0.75);
box-shadow: 8px 7px 46px -15px rgba(0,0,0,0.75);
}
}
</css>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment