With help earlier I fixed an issue with my video player about playing a video by clicking it, but I cannot figure out how to hide the play button overlay on click. Any help will be appreciated.
HTML
<div class="video-wrapper">
<video class="video" id="bVideo" loop controls>
<source src=".mp4" type="video/mp4" />
</video>
<div class="playButton" onclick="playPause()"></div>
</div>
Script
var bunnyVideo = document.getElementById("bVideo");
function playPause() {
if (bunnyVideo.paused)
{
bunnyVideo.play();
$(".playButton").toggle();
}
else
{
bunnyVideo.pause();
$(".playButton").toggle();
}
}
bunnyVideo.addEventListener("click", playPause, false);
/
With help earlier I fixed an issue with my video player about playing a video by clicking it, but I cannot figure out how to hide the play button overlay on click. Any help will be appreciated.
HTML
<div class="video-wrapper">
<video class="video" id="bVideo" loop controls>
<source src="https://www.w3schools./html/mov_bbb.mp4" type="video/mp4" />
</video>
<div class="playButton" onclick="playPause()"></div>
</div>
Script
var bunnyVideo = document.getElementById("bVideo");
function playPause() {
if (bunnyVideo.paused)
{
bunnyVideo.play();
$(".playButton").toggle();
}
else
{
bunnyVideo.pause();
$(".playButton").toggle();
}
}
bunnyVideo.addEventListener("click", playPause, false);
https://jsfiddle/gtoscano/ed9o52k5/2/
Share Improve this question asked Mar 16, 2017 at 23:04 GiBiTGiBiT 3211 gold badge8 silver badges23 bronze badges1 Answer
Reset to default 5Here you go: https://jsfiddle/ed9o52k5/3/
var bunnyVideo = document.getElementById("bVideo");
function playPause() {
var el = document.getElementById("playButton");
if (bunnyVideo.paused) {
bunnyVideo.play();
el.className ="";
} else {
bunnyVideo.pause();
el.className = "playButton";
}
}
bunnyVideo.addEventListener("click", playPause, false);