Question

125

How to play video as popup while clicking on a button in html

rated 0 times [ 131] [ 6] / answers: 1 / hits: 32157 / 7 Years ago, mon, june 12, 2017, 12:00:00

Here i embedded my code. Actually i want to play video as popup while clicking on a button in html by using java script. This code is working but video is still playing in background.

function myFunction() {

  var popup = document.getElementById(myPopup);

  popup.classList.toggle(show);

  popup.play(true)

}

.popup .popuptext {

  visibility: hidden;

  background-color: #555;

  color: #fff;

  text-align: center;

  border-radius: 6px;

  padding: 8px 0;

  z-index: 1;

  bottom: 125%;

  left: 50%;

  margin-left: -80px;

}



.popup .show {

  visibility: visible;

  -webkit-animation: fadeIn 1s;

  animation: fadeIn 1s;

}



@-webkit-keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

<body style=text-align:center>

  <div class=popup onclick=myFunction()><button>Preview</button>

    <video class=popuptext id=myPopup style=width:800px;>

    <source src=dolby-atmos-intro.mp4 type=video/mp4>

    </video>

  </div>

 </body>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kristinsonjab

Add To Favorites

Follow

Total Points: 364

Total Questions: 98

Total Answers: 98

Location: Christmas Island

Member since Mon, Oct 19, 2020

4 Years ago

kristinsonjab questions

1 is it possible to install canvas with M1 chip

Fri, Mar 4, 22, 00:00, 2 Years ago

1 React-router v6 Route composition. Is it possible to render a custom Route?

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Next.js router locale issue

Fri, Jan 22, 21, 00:00, 3 Years ago

1 Sort array of objects by multiple properties of string type

Wed, Sep 2, 20, 00:00, 4 Years ago

1 Can't scroll down screen in react JS

Fri, Aug 14, 20, 00:00, 4 Years ago

View All

answered 7 Years ago kiarra · Accepted Answer

Toggle video play/pause.

<html>

<head>

<style>

.popup .popuptext {

visibility: hidden;

background-color: #555;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 8px 0;

z-index: 1;

bottom: 125%;

left: 50%;

margin-left: -80px;

}

.popup .show {

visibility: visible;

-webkit-animation: fadeIn 1s;

animation: fadeIn 1s;

}

@-webkit-keyframes fadeIn {

from {opacity: 0;} 

to {opacity: 1;}

}

@keyframes fadeIn {

from {opacity: 0;}

to {opacity:1 ;}

}

</style>

</head>

<body style=text-align:center>

<div class=popup onclick=myFunction() ><button>Preview</button>

<video class=popuptext id=myPopup style=width:800px; >

<source src=dolby-atmos-intro.mp4 type=video/mp4>

</video>

</div>

<script>

function myFunction() {

var popup = document.getElementById(myPopup);

popup.classList.toggle(show);



if (popup.paused){ 

    popup.play(); 

    }

  else{ 

    popup.pause();

    }

 

}

</script>

</body>

</html>