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
Related
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>
I am playing embed YouTube video inside bootstrap modal, when i close modal video still playing in background.
Please help me
<!-- Button trigger modal -->
<button type="button" class="btn btn-outline-light" data-bs-toggle="modal" data-bs-target="#vid1" id="pbtn">
<i class="fas fa-play" style="color: #ebaf02;font-size: 24px;"></i>
</button>
<!-- Modal -->
<div class="modal fade" id="vid1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<iframe id="video101" src="https://www.youtube.com/embed/il_t1WVLNxk" width="760" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<script>
var myModal101 = document.getElementById('vid1')
var myInput101 = document.getElementById('video101')
myModal101.addEventListener('hide.bs.modal', function () {
myInput101.get(0).stopVideo();
})
</script>
This will work for you.
$('#vid1').on('hide.bs.modal', function(){
$('#video101').attr('src', $('#video101').attr('src'));
});
Working Fiddle
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', ... )
I have used a single page HTML page in which I have three div. When I click one of the div modal popups and loads the iframe src. The problem I am facing is iframe is not getting loaded properly when I click the div first time. However in chrome, if I right click and then enter reload frame, my iframe is getting loaded properly. Can anyone say what is the issue I am facing? Why the iframe is not getting loaded properly the first time. I am clueless about this issue. Could anyone please assist me.
My html Code : Posting one div and its corresponding modal popup code
Div Code :
<div class="bots" data-toggle="modal" data-target="#myartModal">
<font class ="botHeading" ><b> Password Related</b></font><br />
<font class = "botsub">Click here to Change,reset,enroll or unlock your account.</font>
</div>
Modal Popup
<div class="container">
<!--<h2>Basic Modal Example</h2>
Trigger the modal with a button
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->
<!-- Modal -->
<div class="modal fade" id="myartModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg customModalHeight" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header customModalHeader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" ><b>Account Recovery Agent</b></h3>
</div>
<div class="embed-responsive embed-responsive-4by3 z-depth-1-half customIframeHeight">
<iframe class = "embed-responsive-item" src="http:/xx.xx.xx.xx:4001/" allowfullscreen></iframe>
<!-- <iframe class = "embed-responsive-item" src="http://xx.xx.xx.xx:4001/" allowfullscreen></iframe> -->
</div>
</div>
</div>
</div>
</div>
<!--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>