I have a div that inside of it has a <video autoplay> <source src='myvid'> </video> and by default the div has a display ='none' on css. I am adding an event listener of click on the div and once its clicked i am changing the display none to display block.

the problem is that the video plays automatically when the site reloads and not when the button is clicked. basically i want the video to play only when the div is display ='block'. How can i do that in Javascript?

I have a div that inside of it has a <video autoplay> <source src='myvid'> </video> and by default the div has a display ='none' on css. I am adding an event listener of click on the div and once its clicked i am changing the display none to display block.

the problem is that the video plays automatically when the site reloads and not when the button is clicked. basically i want the video to play only when the div is display ='block'. How can i do that in Javascript?

• javascript
• html

• 1 have you tried removing the autoplay attribute ? :) – Roko C. Buljan Commented Sep 19, 2020 at 10:46
• @RokoC.Buljan yes and if i do that the video doesnt play at all – Why u do dis Commented Sep 19, 2020 at 10:47
• @enhzflep Sorry if you think so. I feel like the I have already listed the only code that is needed, if you read what i wrote. But anyway i will have it as a tip for next time – Why u do dis Commented Sep 19, 2020 at 10:57
• @Whyudodis - . Since my ment has been deleted, it's obviously been judged inappropriate. I'm sorry I did not understand this before writing it. It was penned (keyed!) with the following page in mind. stackoverflow./help/minimal-reproducible-example – enhzflep Commented Sep 19, 2020 at 12:08

2 Answers 2

• Remove the autoplay attribute
• Use JavaScript to play the video using a custom button and the .play() method

<video id="video"> <source src='myvid'></video>
<button id="play">PLAY</button>

document.querySelector("#play").addEventListener("click", () => {
  document.querySelector("#video").play();
});

If you don't want a custom button (not clear from your question) than you could provide the browser default by using the controls attribute

const EL_video = document.querySelector("#video");
const EL_play = document.querySelector("#play");

EL_play.addEventListener("click", () => {
  const isPaused = EL_video.paused;
  EL_video[isPaused ? "play" : "pause"]();
  EL_video.classList.toggle("u-none", !isPaused);
});

#video {width: 300px;}

/* Utility classes: */
.u-none {display: none;}

<button id="play">Toggle &amp; play</button><br>
<video id="video" class="u-none">
  <source src='http://vjs.zencdn/v/oceans.mp4' type='video/mp4'>
</video>

try addind an onclick attribute to the div like this:

<div onclick="play_video();">

Or you can create a button:

<button onclick="play_video();">play the video</button>

Then, create the javascript function like this:

function play_video()
{
  document.getElementById("id_of_the_video").play();
}