Develop Reference

video not stopping when closing modal in bootstrap modal [duplicate]

I have a play image with text 'Watch video', when clicked would open up a bootstrap modal window to play the video i put in. I've got the moday view to work. The problem I'm having with this is when I play the video and exit the screen while it is being played, the video continues to play in the background. If I click on the Watch Video link again, it would play the video from where it stopped off previously.
I need to have the video stop when the modal window is closed. It needs to then play the video from the start the next time I click the "Watch video" link. I'm still new to this and am not sure how to do this. Anyone know how I can achieve this?
<div class="col-md-12 f-play" data-toggle="modal" data-target="#myModal">
<img class="f-play-image" src="images/play.svg" data-target="#myModal" data-video-fullscreen="">Watch video
</div>
<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7pvci1hwAx8?" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

I managed to get it to work with the link that #Leo provided. But it was slow as it reloaded the frame everytime the link was clicked. Tried #guillesalazar solution from Twitter Bootstrap Modal stop Youtube video and it worked perfectly. This was the solution I used.
$("#myModal").on('hidden.bs.modal', function (e) {
$("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
});

Well you can simply remove the src of the iframe and the put back again like ;
<iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf ?>" w></iframe>
<span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton" data-dismiss="modal"></span>
now the Jquery part
function stopVideo(id){
var src = $j('iframe.'+id).attr('src');
$j('iframe.'+id).attr('src','');
$j('iframe.'+id).attr('src',src);
}

You just need to stop the video on the hidden.bs.modal event:
$('#myModal').on('hidden.bs.modal', function () {
player.stopVideo();
// or jQuery
$('#playerID').get(0).stopVideo();
// or remove video url
$('playerID').attr('src', '');
})
Here is a very similar (if not equal) to what you need to do: http://www.tutorialrepublic.com/codelab.php?topic=faq&file=play-youtube-video-in-bootstrap-modal
They do not use the iframe API so everytime they close the modal they just delete the video url .attr('src', '');

For multiple modals with iframe videos, here is the solution:
$('#myModal').on('hidden.bs.modal', function(e) {
var $iframes = $(e.target).find('iframe');
$iframes.each(function(index, iframe){
$(iframe).attr('src', $(iframe).attr('src'));
});
})
On modal close, it goes through all the iframe videos and resets them instead of resetting all of them to the first video.

// Simple and clean
Try using class or ID before Iframe to refresh/reload the particular video. Otherwise, it will reload all iframe source.
$( id/class + 'iframe').attr('src', $('iframe').attr('src'));

**If you want to open modal with iframe and remove on close best and short answer**
test = function (){
$('#test_tutorial').modal('show').on('hidden.bs.modal', function (e) {
$("#test_tutorial iframe").attr("src", "");
}).on('show.bs.modal', function (e) {
$("#test_tutorial iframe").attr("src", $("#test
_tutorial iframe").attr("data-src"));
});
}

Late to the party, but some people may find this useful in the future. In my case I had a real struggle achieving this due to the video being embedded from a div with a video element in the iframe, not with the src directly in the iframe element, like this:
<iframe>
<div class="videoContainer">
<video src="#"></video>
</div>
</iframe>
I solved this with the following approach:
$('#myModal').on('hidden.bs.modal', function() {
$('iframe').contents().find('video')[0].pause();
});
It also pauses the video instead of refreshing the url/replacing the src attribute by the same value, as suggested in the accepted answer.

display button after viedo watched

Hi I am trying to display a video for my website members but I need to
show a button to submit the form to me confirming that they watched the video fully without any skip
I have difficulty setting the timer to show the button based on the video length not setting a custom time.
I need to set the time based on the video length and stop the timer if the user pauses the video.
here is my code
<div class="embed-responsive embed-responsive-16by9">
<video controls id="myVideo" class="embed-responsive-item" src="/assets/MSFS.mp4" allowfullscreen></video></div>
JS
<script>
$(document).ready(function() {
setTimeout(function() {
$("#proceed").show();
}, 5000);
});
</script>
button
<button id="proceed" type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal">Submit</button>
basically what is happening the button is displayed after 5 seconds I need to change 5 seconds to the length of the video. Is there any way to get the length of the video and set it instead of manually entering it? How to stop the timer if the video pauses?
Thanks

How to stop YouTube video when hidding a Div

I've made a similar question in the past, but I decided to try again since I have gone in a different direction since then. (I was trying with YouTube API and wasn't getting anywhere with that)
I'm trying to build a website where different pages are shown by using a function that hides/shows different divs. One of those pages has a video from YouTube and I was trying to figure out a way to stop the video when the respective div is hidden. Right now, the video just keeps playing in the background (you can hear the sound), if you change to another page/div.
After some sleuthing on the internet (i.e. this website), I finally got a solution working which is as follows.
var stopButton = document.getElementById('fecharvideo');
stopButton.onclick = function() {
var myPlayer = document.getElementById("player");
myPlayer.setAttribute("src", " ");
};
Unfortunately, as you can probably guess. This means that after clicking on an element with the id=fecharvideo, the iframe simply disappears, meaning if you return to that div the video will no longer appear, which is not ideal.
Any similar solution to this problem that allows me to reset the video, instead of deleting it altogether?
Here's the fiddle (To test it out Open "Episódio 1", start video, Open "Episódios" through the hamburger menu, and then back to "Episódio 1"): https://jsfiddle.net/Santos1600/qu8ejwsm/20/

Solution:
html
<div id="ep1" class="ep1" style="display: none;">
<div class="video-background">
<div class="video-foreground">
<iframe id="player" src="https://www.youtube.com/embed/videoseries?list=**PLAYLISTID**&modestbranding=1&iv_load_policy=3&rel=0&showinfo=0&loop=1&autoplay=1&autohide=1&enablejsapi=1&playerapiid=ytplayer1" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
</div>
<div class="container">
<!--Menu/Episódio 1-->
<div id="myNav2" class="overlayep">
<div class="overlay-content">
<ul>
<li>EPISÓDIOS</li>
<ul><li>POEMA MEDRICAS</li>
<li>O CÃO</li>
<li>TERAPIA À DISTÂNCIA</li>
<li>MANIA DA PERSEGUIÇÃO</li>
</ul>
<li>SOBRE</li></ul>
</div>
</div>
<div class="botaomenu" onclick="myFunction(this); toggleNav2();">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<img src="assets/logohorizontal.png" alt="logo" class="logosmall">
</div>
</div>
js
var video1 = document.getElementById('player')
function toggleVideo(a, state) {
var iframe = a.contentWindow;
iframe.postMessage('{"event":"command","func":"' + state + '","args":""}', '*');
}

stop/pause video when modal closes/hides

I know this has been asked and answered, but I'm not having any luck with any of the options that I've found. I'm trying to have the video stop playback or pause the video when the modal closes. One problem I'm having is the ability to target the close button. I've put console.logs in the functions I've tried and they weren't registering in the console at all. Thanks for any insights able to be offered.
<div id="myModal<%= index + 1 %>" data-id='<%= list.video_id %>'class="modal fade videoModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content bmd-modalContent" >
<div class="modal-body modal-header">
<div class="close-button">
<button id='single' type="button" class="close fancybox-close" data-dismiss="modal" aria-label='Close' ><span aria-hidden="true">×</span></button>
</div>
<div class='embed-responsive embed-responsive-16by9'>
<iframe id='player' class='embed-responsive-item' src="https://youtube.com/embed/<%= list.video_id %>?rel=0&enablejsapi=1" allowFullScreen='true' frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
EDIT:
Sorry, I'had tried so much jQuery that I didn't have any in my app.js folder at the time. Here is what I'm working with now.
$('[id^=myModal]').on('hidden.bs.modal', function(event) {
console.log(player);
event.target.stopVideo();
});

Update the question with more details
Its really hard to tell what is the problem because you only posted html. You having problem with locating close button and your console.log doesnt trigger. Obviously your javascripe file has some errors above your console.log line.
To detect if modal is closed you can use this EVENT
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
I would not change id of modals when generating them, instead I would put data-attr on this element to have one .on('hidden.bs.modal') and to have control over every modal
UPDATE:
from youtube-api docs https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
It has been said that if you embed in your html iframe with the youtube video then in the moment u make something like this in js:
function onYouTubeIframeAPIReady(){
var iframe = document.getElementById("my-video");
video = new YT.Player(iframe);
}
you dont have to define attributes of Player that you create, it will take it from the iframe.
fiddle: http://jsfiddle.net/ux86c7t3/2/

Well, you can simply remove the src of the iframe and then put back again like; so the iframe stops running.
<iframe id="videosContainers" class="yvideo" src="https://www.youtube.com/embed/kjsdaf ?>" w></iframe>
<span onclick="stopVideo(this.getAttribute('vdoId'))" vdoId ="yvideo" id="CloseModalButton" data-dismiss="modal"></span>
now the Jquery part
function stopVideo(id){
var src = $j('iframe.'+id).attr('src');
$j('iframe.'+id).attr('src','');
$j('iframe.'+id).attr('src',src);
}

Using Orbit Slider with video

I have a question regarding Orbit Slider.
I want to place a youtube video in the slider.
I used div and embed to replace img and was successful. The video can play and stop.
My question is how can I make the slider's timer stop when user presses PLAY on the video in the slider?

If you look at the Orbit slider javascript it works using events. Look for these bits of code in the Orbit JS file
this.$element.bind('orbit.start', function (event, index) {
self.startClock();
});
this.$element.bind('orbit.stop', function (event, index) {
self.stopClock();
});
These bind the events 'orbit.stop' and 'orbit.start' events to the HTML element (which usually has an ID 'featured' when using the Foundation way of setting up Orbit). So if you trigger these events e.g. 'orbit.stop' from the HTML element it will call the function stopClock(). The following should help...
HTML
<a id="stop-button" href="#" class="button rounded">stop</a>
<a id="start-button" href="#" class="button rounded">start</a>
Javascript
$('#stop-button').on('click',function(){
$('#featured').trigger('orbit.stop');
});
$('#start-button').on('click',function(){
$('#featured').trigger('orbit.start');
});
/*using the setup
<div id="featured">
<img src="../images/orbit-demo/demo1.jpg" />
<img src="../images/orbit-demo/demo2.jpg" />
<img src="../images/orbit-demo/demo3.jpg" />
</div>
*/