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

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>

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>

Share Improve this question edited Jun 12, 2017 at 10:44 Nadir Laskar 4,1702 gold badges19 silver badges33 bronze badges asked Jun 12, 2017 at 10:40 Ridhik 251 gold badge1 silver badge8 bronze badges

Do you mean the video plays from the start before clicking on button? – Kaung Myat Lwin Commented Jun 12, 2017 at 10:42
you can use the bootstrap modal here..good tutorial tutorialrepublic./faq/… and – Janen R Commented Jun 12, 2017 at 10:43
@Ridhik Try bootstrap modal pop ups. It's very elegant and needs less code. – J.Joseph Commented Jun 12, 2017 at 10:43
refer stackoverflow./questions/5958132/… – Dinesh undefined Commented Jun 12, 2017 at 10:44

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

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>

Try the below code

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="openIt()">preview</button>

<script>
function openIt(){
    window.open("video Url");
}
</script>
</body>
</html>

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to play video as popup while clicking on a button in html - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)