So I have a bunch of modals (like 30) each containing some text and an embedded youtube video, I want to pause or refresh the video(so as to put it back to the beginning before the play button was pressed) whenever its parent modal is closed (either by pressing the close button or clicking out of the modal). I would also prefer to do this to all the modals and videos through the same script rather than having a script for each individual one. I know very very little javascript though, does anyone know it this is possible and if so I would love it if you'd help me out a little :)
This is an example of the modal
<div aria-labelledby="myLargeModalLabel" class="modal fade news6" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="container-fluid">
<span class="glyphicon glyphicon-remove closer" data-dismiss="modal"></span>
<div class="col-md-8 vid">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fcZMO1mjArs?color=white&&rel=0&showinfo=0" allowfullscreen="1"></iframe>
</div>
</div>
<h1>Iraq Update<br><small>- 2003</small></h1>
<p>Edited for SBS world news evening bulletin</p>
</div>
</div>
</div>
</div>
The class news6 on the parent modal is the unique identifier and the other modals have similar names (news3,news4,etc...)
Once again I really appreciate any help with these things :)
Related
I am using bootstrap modal popup to show a a message. When I am using the below statement inside a html frame then modal dialog is getting disappear when user click anywhere in the body . My requirement is to prevent this popup to disappear.
$('#testModel').modal({backdrop: 'static', keyboard: false});
<div class="modal fade" id="testModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body err-cnct">
<h2><i class="demo-icon fa-lg icon-cancel"></i></h2>
<p> <h4 class="modal-title">Connection Error!</h4>
Connection to the Hub has been lost. <br/>Please check power and Ethernet connections. </p>
</div>
</div>
</div>
</div>
Thanks.
See the documentation here. Set a data attribute as such:
data-backdrop="static"
I read a lot of similar posts but didn't find the right solution for my project.
I would like to let the user show/hide the bootstrap modal with a simple <a> balise. It's a Youtube iframe with an autoplay=1.
First problem is that when the page load, the video is launching and we can hear the sound but of course cannot see the video inside the bidding modal. Second problem, I need to stop the video when the user closes the modal with the cross or just by clicking outside the modal.
Here is a online demo : See live demo
Here is my code, I'm using Bootstrap 3+ :
<div aria-labelledby="myModalLabel" class="modal fade responsive-video" id="myModal" role="dialog" tabindex="-1">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
</div>
<div class="modal-body"></div>
</div>
and the JS :
<script>
$('#myModal').on('show', function () {
$('div.modal-body').html('<iframe width="100%" height="360" src="https://www.youtube.com/embed/PUcTN5ou2o0?autoplay=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
});
$('#myModal').on('hide', function () {
$('div.modal-body').html('');
});
</script>
You could leave the SRC attribute of the iframe blank initially and only set it to the desired YouTube video with autoplay=1 when the user opens the modal window.
HTML:
<div aria-labelledby="myModalLabel" class="modal fade responsive-video" id="myModal" role="dialog" tabindex="-1">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
</div>
<div class="modal-body">
<iframe id="youtube" src="" />
</div>
</div>
JS:
<script>
$('#myModal').on('show', function () {
$('div.modal-body iframe#youtube').attr('src', 'https://www.youtube.com/embed/PUcTN5ou2o0?autoplay=1&rel=0&showinfo=0');
});
$('#myModal').on('hide', function () {
$('div.modal-body iframe#youtube').attr('src', '');
});
</script>
Sorry, can't comment, missing the privilege. So a quick answer with two possible solutions.
Solution 1: use the Youtube API
You can find the API reference here: https://developers.google.com/youtube/iframe_api_reference
So you could create the iframe when showing the page and just use the play() method when launching the modal.
Solution 2: use a premade player
There are lots of good solutions out there. As I'm in the matter right now, I'd recommend using http://afterglowplayer.com (based on video.js) or some other similar solution. There is lightbox support and you don't have to cope with this kind of stuff. :)
kind of nested modal box for external links issue ,I had used the following code successfully to load external page in modal box but I cannot load external links inside that modal to open them as modal box the same way because I want it to be opened by default if the user opened it out of modal box
<div id="Site" class="modal fade page-load" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" style="text-align: center">
<div data-role="page">
<div class="Popup">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$("#Site .Popup").load("Site.html");
</script>
I have looked at a few questions on here that are having the same issue I am having, but I can not seem to resolve my issue.
I am wanting to display a modal in certain scenarios... So I will need to show/hide based on certain scenarios. This is what I have :
ASP.NET
<div class="modal fade" id="lockUser" runat="server" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Warning</h4>
</div>
<div class="modal-body">
<p>Watch out! Your about to be locked out.</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
function openModal() {
$('#lockUser').modal('show');
}
C#
ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
I have the C# code in a click event, everything in the event fires except for the above line...
Maybe I a missing something really stupid
Any suggestions?
First thing to do is make sure that the openModal() method works. If it does, then move the script files (bootstrap.min.js, etc.) and functions from the bottom of your page to inside <head>..</head>.
I am working on bootstrap modal pop up to play a youtube video and should stop it on click of close or close outside.
Below is my code.
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="width: 682px;">
<div class="modal-header" style="border:none;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="640" height="390" src="http://www.youtube.com/watch?v=8CdAfYwEGCI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I have tried the below scripts from the similar asked questions on StackOverflow, but they don't work.
Scripts:
$('.close').click(function () {
$('#myModal2').hide();
$('#myModal2 iframe').attr("src", jQuery("#myModal2 iframe").attr("src"));
});
Similar Stackoverflow Questions referred:
How to stop a Youtube Video Playing on Twitter Bootstrap Model Close
Start/stop youtube iframe when modal is shown/hidden through the api and Jquery events
.. and more
Bootstrap has an event called hidden.bs.modal
You can attach your function to this event instead of click
$('#myModal2').on('hidden.bs.modal', function(){
$('#myModal2').hide();
$('#myModal2 iframe').attr("src", jQuery("#myModal2 iframe").attr("src"));
});
Also, bootstrap should automatically hide the modal on its close buttons (this should already be built in)
As for stopping the video, it looks like you are setting the iframe src to itself
(not sure if that will stop the video, if it does then you can ignore my comments below, but if not, you may want to set the src to blank)
$('#myModal2 iframe').attr("src", "");
This will for sure stop the video