If anyone could help me with this. I've been struggling for a few days. I'm trying to open a video using the bootstrap modal. I am showing the video on the home page. When I start the application or when I do a reload it works properly, but if I change the component to the About page or something else, when I go back to the modal it opens a dialog, but only with a white background and the video does not start.
<div class="container-xxl py-5 px-0 wow fadeInUp" data-wow-delay="0.1s">
<div class="row g-0">
<div class="col-md-12">
<div class="video">
<button type="button" class="btn-play" data-bs-toggle="modal" data-src="assets/video.mp4" data-bs-target="#videoModal">
<span></span>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content rounded-0">
<div class="modal-body">
<!-- 16:9 aspect ratio -->
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="" id="video" allowfullscreen allowscriptaccess="always"
allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
Related
I have a form page that opens inside a Modal, but when I open the modal, the form does not appear complete, the modal cuts a part of it, is there any possibility of modal getting the page size?
html
<!-- Modal -->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-warning text-white">
<h3 class="modal-title" id="exampleModalLabel1">Change, Update Wallet</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="iframeModal1" class="embed-responsive-item" src=""></iframe>
</div>
</div>
</div>
</div>
</div>
<!--end modal -->
-- EDITED
Solved! I adjusted by putting
<br>
<br>
You use embed-responsive-16by9 (16:9) this only works if your delivered content is not exceeding this ratio.
A possible solution is to add a Listener to wait for your iframe to be loaded:
First remove embed-responsive-16by9
Then set the height of your surrounding conainer to your iframes height
$('iframeModal1').on('load', function({
$('.embed-responsive').height($(this).contents().height());
});
You may want to set the height again in case the windows gets resized (portait/landscape)
$(window).on('resize', ... )
<!--on clicking this image modal will open-->
<div class="col-sm-4 col-xs-12" id="audi">
<a class="d-block" data-target="#modalaudi" data-toggle="modal" href="#"><img alt="Audition" class="img-fluid mx-auto d-block" src="image/a12.jpg"></a>
<h4 style="text-align:center">Audition</h4>
</div><!--modal-->
<div class="modal fade" id="modalaudi">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title text-primary">AUDITION</h4><button class="close" data-dismiss="modal" type="button">×</button>
</div><!-- Modal body -->
<div class="modal-body mx-auto">
<div class="embed-responsive embed-responsive-16by9">
<iframe allowfullscreen class="embed-responsive-item" src="https://www.youtube.com/embed/vnoKLLui7JA"></iframe>
</div>
</div>
</div>
</div>
</div>
First I add image in bootstrap grid that is col-sm-4. On clicking this image one modal should open that will contain video but adding on iframe video is not becoming responsive at all. So I added embed-responsive but still video doesn't appear on modal.
The problem is that the modal-body where you have your iframe didn't have any width except that from the padding-left:15px; padding-right:15px which is 30px of width. Not enough to show the video. So just add class w-100 which adds width:100% to .modal-body.
w-100 class works in BS4, not really sure about BS3. But you could add css .modal-body { width: 100% } if the class doesn't work
NOTE: the video does not appear in the below snippet because of ( i guess ) Stackoverflow's security but you can see it here -> jsFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4 col-xs-12" id="audi">
<a href="#" class="d-block" data-toggle="modal" data-target="#modalaudi">
<img src="image\a12.jpg" alt="Audition" class="img-fluid mx-auto d-block">
</a>
<h4 style="text-align:center">Audition</h4>
</div>
<!--modal-->
<div class="modal fade" id="modalaudi">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title text-primary">AUDITION</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body mx-auto w-100">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vnoKLLui7JA" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I want to click a photo, then it will zoom in.
Like this website --> https://mobirise.com/bootstrap-gallery/
But I just need one photo to zoom in only. Not a photo gallery. Please help.
<img src="images/uploads/phs.jpg"></img>
in my last project, i have used this i hope its help you try this demo:
http://jsfiddle.net/6CR2H/1/
<a href="#" class="pop">
<img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;" class="img-responsive">
</a>
<a href="#" class="pop">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">
</a>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" data-dismiss="modal">
<div class="modal-content" >
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
<div class="modal-footer">
<div class="col-xs-12">
<p class="text-left">1. line of description<br>2. line of description <br>3. line of description</p>
</div>
</div>
</div>
</div>
</div>
javascript code:
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
I have a JSFiddle here - http://jsfiddle.net/n90Lexgc/
I'm using bootstrap modal to load a vimeo video.
I've added CSS to make the video larger and responsive.
My problem is I've lost the play button in the video.
If I click the video it plays and stops, but I have no play button.
<!-- video player -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content embed-responsive embed-responsive-16by9">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="1000" height="528" frameborder="0" allowfullscreen="" class="embed-responsive-item"></iframe>
</div>
</div>
</div>
</div>
<!-- video player -->
<div class="container-fluid">
<div clas="row">
<button class="js-play" data-vid="105100455">Video</button>
</div>
</div>
Its not that your buttons are missing, they're just pushed so far down you can't see them.
You'll need to cut some of the padding from your modal-body.
.modal-body {
...
padding-bottom: 49%;
...
}
JSFiddle
I am trying to build a two column layout in a bootstrap modal. This is the code:
<div class="modal fade in" id="product-showcase-modal" tabindex="-1" role="dialog" aria-labelledby="product-showcase" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="container col-xs-12">
<div class="row-fluid">
<div class="col-xs-6">
<img src="http://localhost/haya/img/hijabs/dark%20grey.jpg" id="product_image" width="200px" height="auto" style="display: inline;">
</div>
<div class="col-xs-6">
<h3 id="product_name">Dark Gray</h3>
<p id="new_price">$3.00</p>
<p style="text-decoration: line-through;" id="old_price">$4.35</p>
<button class="btn btn-warning">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
And this is the result:
I have no idea why is this happening. Can anyone resolve this?
UPDATE 1:
I removed the col-xs-12 class from the container div. Now the container is in the modal's body but it's has taken a width of 100% (my screen's width). Result:
Just need to add a clearfix to the modal-body. This will fix the float item issue where the container doesn't fully expand.
Fiddle: http://jsfiddle.net/52VtD/6310/
<div class="modal-body clearfix">