I am storing the YouTube and video embed urls in my database. Then calling the video URL in the modal to play the video. But video keeps playing even if the modal is closed. I have tried this solutions and it works for me, but it assign the same id to every video.
I mean, i have 6 different videos in my page and this solution then, play the same video in every modal.
Please guide.
Thanks in advance
Here is my code
if($row['link_type'] == 'yt_video'){
?>
<div class="modal" id="mod<?=$i ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<!--<h5 class="modal-title" id="exampleModalLabel">Add Video Url For <b><?php echo $row['title']; ?></b></h5> -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</div>
<div class="modal-body">
<!-- video section strts -->
<div class="service-video-section josh-js" data-josh-anim-name="" data-josh-duration="1500ms" data-josh-anim-delay="3.5s">
<div class="video-section-content">
<div class="video">
<?=$row['link_desc'] ?>
</div>
</div>
</div>
<!-- video section Ends -->
</div>
</div>
</div>
</div>
<?php
}
$i++;
}
?>
And here is my solution that i tried
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
});
});
</script>
Have you considered using the youtube and vimeo APIs? You will then be able to control the embeded players controls i.e. stop, play, pause etc. Like mentioned below:
Stop embedded youtube iframe?
Then when you fire the close.click function you can also stop the video.
Related
I'm using Bootstrap Modal to load lightboxes with some resource-heavy content.
But the content is loaded immediately with the page. And since there's several lightboxes it slows the page down significantly.
I want the content to load only when the modal button is clicked. But I don't want to call the modal code from a separate page, since that would complicate everything.
Is there some way to use JS or AJAX to load the modal content only when the modal box opens?
Somehow trigger it to load when the button is clicked and then turn the content off, when the box is closed.
Also bear in mind that I don't know almost anything about JS or AJAX.
--EDIT: It would be great if the same solution could be applied to tabbed content--
The code I'm using:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<iframe width='100%' height='368' src='#' frameborder='0' allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I have seen a few solutions to a similar issue here on SO but none do what I need. I have a web page that will be displayed on a kiosk that will not have internet connection so everything is local. All of my videos are in bootstrap modals and they continue to play on modal close.
One solution removes the link entirely and so the video can't be replayed if clicked again. The other solutions in their various forms stop the video for 1/2 a second then the video continues.
Video Modal
<!-- Modal Overview -->
<div class="portfolio-modal modal fade" id="gal_overview" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2 class="text-uppercase">Overview</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="video/overview.mp4" allowfullscreen></iframe></div>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times"></i>
Close Video</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Last Script Tried
<script>
$('.portfolio-modal').on('hide.bs.modal', function(e) {
var $if = $(e.delegateTarget).find('iframe');
var src = $if.attr("src");
$if.attr("src", '/empty.html');
$if.attr("src", src);
});
</script>
This current code will start playing all videos in the background on page load. I'm sure I'm missing something super simple here.
Working answer:
Since the iframe just points to a video file, you can change the iframe to a <video> and control the video much more easily.
<video src="video/overview.mp4"></video>
The .pause() method on the video element can then be used to actually pause the video.
<script>
$('.portfolio-modal').on('hide.bs.modal', function(e) {
var $v = $(e.delegateTarget).find('video');
$v[0].pause(); // use [0] because jQuery returns a list
});
</script>
Initial answer:
It sounds like you should lazily-apply the iframe's src attribute. So when the page loads, the iframes' src attributes should be data-src. That way no video is playing.
Then on $('.portfolio-modal').on('show.bs.modal'), set the src attribute with the contents of data-src. The video will play.
Then when the modal is hidden, replace src with /empty.html again.
Next time the modal is launched, the src will be set again, and the cycle repeats.
If you truly want to pause the video rather than reset the iframe, then this answer should be helpful.
I have used bootstrap popup modal but it appears every time on page loads. I have gone through every question & answer in Stackoverflow and tried every code but not worked. That's why I am posting this question again. I am not much familiar with Javascript and I am requesting to post the right code for me. My used codes are below:
<script>
jQuery(window).load(function(){
setTimeout(function(){
jQuery('#myModal2').modal('show');
}, 10000);
});
</script>
<div id="myModal2" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" style="font-size:18px; text-align:center;">Get The Latest & Best Coupon/Offer Alerts</h4>
</div>
<div class="modal-body">
<h4 style="font-size:16px; text-align:center;">Subscribe to our mailing list to get the latest updates straight in your inbox.</h4>
<hr>
<center><?php echo do_shortcode('[newsletter_form type="minimal"]'); ?></center>
<br>
<h3 class="cb-subnl">We value your privacy & guarantee zero spamming. Subscribe now and receive 1 mail per day. Never miss out on latest coupons, deals and best offers!</h3>
</div>
</div>
</div>
</div>
we created a website where we want to show some examples of our cards as thumbnails, but when you click on it a larger picture should be displayed in a modal window. Now locally (windows machine) it works perfect, but once hosted (linux machine) the whole content (title, markup, picture, buttons) of the modal are displayed as a set of strange symbols.
The code of the modal:
<div class="col-md-4">
<a href="images/JUNO-FOTO-MW.png" class="thumbnail" data-toggle="modal" data-target="#ModalJUNO">
<img src="images/JUNO-FOTO.gif" alt="geboortekaartje Juno" style="width:200px;height:200px">
<p>geboortekaartje </br>Juno</p>
</a>
</div>
<!-- Modal -->
<div id="ModalJUNO" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Geboortekaartje Juno</h4>
</div>
<div class="modal-body">
<img src="images/JUNO-FOTO-MW.gif" title="geboortekaartje Juno" alt="geboortekaartje Juno wil nu eventjes niet laden" width="850" height="850">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The result of the hosted site
A part of the result:
Since it is not only the picture but the whole modal that is displayed like this, it does not seems like it is an encoding problem.
Any help is greatlty appreciated!
Remove href from your <a> tags.
I debugged bootstrap.js and found, that jQuery.load function is used to load modal's content.
Take a look at
http://getbootstrap.com/javascript/#modals-options
Read about remote option.
I have a page which has an iFrame to another page and what I am looking for is to click a button with this code inside the iframe:
<td class="id-center">
<div class="bs-example">
<a id="comments" href="comments.php?id=$id" name="comments" value="$id" data-toggle="modal" data-target=".bs-example-modal-lg\" class="btn btn-primary btn-default center-1"><span class="glyphicon glyphicon-comment"></span></a>
</div>
</td>
which can then open the following overlay pop up box in the parent window:
<!-- Large modal -->
<div style="width:90%;" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<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="myLargeModalLabel">Add a comment</h4>
</div>
<!-- Body of popup -->
<div class="modal-body">
Test
</div>
</div>
</div>
</div>
I'm doing this with Bootstrap 3. Any help would be appreciated!
One way you could go about this is to open the modal through bootstrap's javascript api. The key to making this work is to use the iframe's parent attribute to access the parent document. You can check out this JSFiddle to see what I mean. Unfortunately it's set up kind of strangely because the iframe can't access JSFiddles javascript window (or I just don't know how), but the content you would see in the iframe is embedded in its property srcdoc. Let me know if any of this needs any explaining.
window.document.body.insertAdjacentHTML('afterbegin', "<div id='overlay' style='height: 100em;background-color:#000; opacity:0.4; width: 100%;z-index: 1000;position: fixed;'><div style='height: 100%;width: 70px;margin: auto;'><img src='/spinner.gif' style='height: 70px;margin-top: 40vh;'/></div></div>")
This will add overlay to your parent body but this will work only if both the pages in the same domain.