Saili G Saili G - 1 month ago 11
CSS Question

How to stop/pause an embedded on clicking a cancel button?

I have a video on an overlay div which opens on button click. I have a cancel button on the video which on clicking should close the overlay as well as stop/pause the video. Here's what I am doing -

<html>
<head>
<style>
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3000;
height: 100%;
width: 100%;
background: #FFF;
color: #000;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
.closebtn
{
position: absolute;
top: 0%;
right: 45px;
font-size: 40px;
}
</style>

<script>
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
}
else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
function pauseVideo()
{
var vid = document.getElementById('myVid');
vid.pause();
}
</script>
</head>

<body>
<!-- Start Overlay -->
<div id="overlay">
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<iframe id="myVid" src="https://player.vimeo.com/video/183364240title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0"></iframe>
<div class="closebtn">
<a href="javascript:void(0)" onclick="toggleOverlay(); pauseVideo()">&times;</a>
</div>
</div>
<!-- End Special Centered Box -->
</div>
<!-- Start Normal Page Content -->
<div id="wrapper">
<button onmousedown="toggleOverlay()">Apply Overlay</button>
</div>
<!-- End Normal Page Content -->
</body>
</html>


So , when I click on the cancel button, I want to close the overlay div(which is happening) as well as pause the video. Can anyone tell me where am I going wrong?

Answer

You cant pause the iframe to stop the video running in it (dummy) :). As your using vimeo link so you will have to use vimeo api. To make that happen do as follows:

Add script tag with vimeocdn to froogaloop2.js as follows

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

Next: Add the api=1 querystring in the video url as follows: (Note your video url was missing the ? which was causing the video to not load)

https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0

Last: Put the following code in your pauseVideo function:

function pauseVideo()
{
  var players;
  players=$('#myVid');

  $f(players[0]).api('pause');
}

That should fulfill you needs. (Note: For youtube videos, you may have to use youtube api methods and procedures)

Example code: http://codepen.io/Nasir_T/pen/pEmEJE

Hope this helps.

Comments