|
<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> |
|
|
|
|
