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.

How to change an href attribute through Javascript on a modal window

I've been searching and trying different ways to change an href attribute through Javascript. Few things have worked better than others.
The problem with this approach is that the variable on the href is not working. I guess there is a better way to include a variable within an html tag.
I'm really stuck on this so would appreciate any help.
Here is the code of the modal window:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close">×</span>
<h1>¿Quieres seguir creando?</h1>
<a class="btn-ok" href=enlace target="_blank">OK</a>
</div>
</div>
And this the button that the user clicks on before the modal window is shown:
<script type="text/javascript">
var enlace;
</script>
<button onclick="enlace='https://cloqq.com/actividad/tu-aventura-interactiva';return false" id="" class="go-btn pink-bg">Empieza a crear
</button>

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
You can use setAttribute to reassign the href, the way you're using javascript in html doesnt work like that.
const itemYouWantToUpdateHref = document.querySelector('.btn-ok')
function changeHref(link) {
itemYouWantToUpdateHref.setAttribute('href', link);
}
<a class="btn-ok" href="www.google.com" target="_blank">My link will change</a>
<button onclick="changeHref('www.youtube.com')">click to change href from google to youtube</button>

You can use your code itself with only some changes and without any script tag. look at code below:
<button onclick="window.enlace='https://cloqq.com/actividad/tu-aventura-interactiva'" class="go-btn pink-bg">Empieza a crear</button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close">×</span>
<h1>¿Quieres seguir creando?</h1>
<a class="btn-ok" href="javascript:window.open(window.enlace||'defaultAddress', '_blank');">OK</a>
<!--
!! If you like to show an alert when the button is not clicked yet, try line below instead above line:
<a class="btn-ok" href="javascript:window.enlace?window.open(window.enlace, '_blank'):alert('Please click the Button first!');">OK</a>
-->
</div>
</div>
If you run above snippet and look at console, you can see all things is fine (but because Security problems this will not work with these URLs in current page and you should copy it in your project or an empty html file for seeing the result.)

How to toggle between two jQuery functions for Introjs tour plugin

I am in the process of learning jQuery and JS, so I apologize if this is a stupid, easy question.
I am working with a tour plugin called intro.js that adds hints to a web page (bootstrap page). I got the intro.js hints working, however I need to be able to show and hide all of the hints by toggling one button. The way the plugin currently works, you show the hints by clicking a button, then you have to manually click on each hint icon to view the tooltip, then click a button on the tooltip to hide the hint icon. The web pages could have several hints displayed (anywhere from 10-15) and users may not want to see what all hints are, as they may want to just see what 1 or 2 are then close all the hints - so I want to be able to toggle all of them on/off with one button.
According to the plugin API (view it here: https://introjs.com/docs/hints/api/), the hints are added when the button is clicked using this function: introJs.addHints(). You are supposed to be able to hide all of the hints using this function: introJs.hideHints().
So, how can I toggle both of these functions with one button?
Also, another issue I am having is if a user does not close all of the hint icons and they open a new page, the hint icons are still visible. If I refresh the page, they disappear. Related to this, if someone opens the hints and closes them, but decides to reopen the hints again, they do not open unless the page is refreshed. The API documentation has a function called: introJs.refresh() that says it refreshes and rearranges the hints. I think this is what I need to clear the existing hints (but I could be wrong). How can I clear/refresh the hints when the hints are closed so users can reopen the hints if needed, without refreshing - and so the hints disappear if a new page is opened and some hints were not closed.
Please help me with these questions and make a newbie's Christmas/holiday even better!!!
Here is a jsfiddle with hints added to a bootstrap modal. The Show Hints link is what I need to toggle on/off: http://jsfiddle.net/beaver71/fc0rkakn/
Thank you to everyone reading - and Happy Holidays to all of you.
Sample HTML:
<!-- Button trigger modal -->
Open Notes Modal
<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Notes</h4>
</div>
<div class="modal-body">
<div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
<input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
</div>
</div>
<div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="middle-right" style="margin-left:15px;">0/300
</div>
<div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i> Show Hints</a></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

The API allows introJs to be commanded and for callbacks to be attached to various internal events, however it doesn't provide for inspection of state (in particular whether or not a hint is currently showing).
To achieve the toggle function, you will need to manage a state variable of your own.
Something like this ...
jQuery(function($) {
var hintShowing = false; // a variable by which to track the state of introJs.
introJs("#targetElment");
$("#myToggleButton").on('click', function() {
if(hintShowing) {
introJs.hideHints();
hintShowing = false;
} else {
introJs.showHints();
hintShowing = true;
}
});
function setShowing() {
hintShowing = true;
}
function resetShowing() {
hintShowing = false;
}
introJs.onchange(setShowing).oncomplete(resetShowing).onexit(resetShowing);
// add hints and set options here
});
That should work, at least to a certain extent. It depends on whether onchange fires when the initial hint is shown. If not, setShowing() will also need to be called manually (from your own code when the hint sequence starts) or maybe just initialise var hintShowing = true;

how to open a modal and switch the iframe src inside the modal

I have a modal in my application which currently opens using bootsrap:
<div class="modal full-page fade" tabindex="-1" role="dialog" id="fullpageModal">
<div class="full-page-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<iframe src="http://www.example.com/id/1"></iframe>
In my HTML I have a button attached to a function:
<button (click)="initPlay(2)" data-toggle="modal" data-target="#fullpageModal" >PLAY</button>
At present bootstrap opens the modal and Angular handles the click.
What needs to happen is this:
User clicks on button
The iFrame URL src is updated according to the button clicked
The modal is made visible.
What I think I need to do is this:
Remove the opening of the modal from bootstrap and hand this to Angular2
On button click the function updates the iframe src
The function then opens the modal (or hands this back to Bootstrap?)
My questions:
What is the best method to update the iframe src? Maybe to include a variable: {{iframeSrc}} and to update this after click?
What is the best way to handle modal opening?
Thank you!

Well this turned out to be really simple.
I created two functions:
initPlay(id) {
this.iframeSrc = "http://example.com/game/" + id;
}
clearPlay() {
this.iframeSrc = "";
}
I left bootstrap to manage the modal open and close and simply used the Angular2 (click) method to initiate the src change.
I added a "loading" class to the iframe to show that action is taking place.
Thats it.

Auto-closing functionality on Twitter Bootstrap JS alerts

The Twitter Bootstrap library now has Javascript plugins available, and one of them is supposed to give your alerts an automatic close button.
The documentation is here
I can't figure out how to get it to work. See this code and fiddle:
<div class = "alert-message fade in" data-alert = "alert">
<p>This is an alert!</p>
</div>
http://jsfiddle.net/SBQcp/
I'm sure there's a syntax piece that I'm missing, but I don't get it.

Alerts are not supposed to be auto-closed because the intention is to the user to notice any message before closing.
Although you can add a link so the user can close it manually this way.
<div class = "alert-message fade in" data-alert = "alert">
<a class="close" href="#">×</a>
<p>This is an alert!</p>
</div>
Or can be closed programatically this way:
$(".alert-message").alert('close')