I am trying to insert video in the page which i am working on. But my page is not displaying poster image. Only the video is working when played. Why?
<body class="page page-index">
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" style="overflow:hidden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header" style="padding:0px 0px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body" style="max-height:none" >
<video controls height="480" width="480" poster="img/poster480.png">
<source src="video/sample.mp4" type="video/mp4">
</video>
</div>
</div>
<script src="js/bootstrap-modal.js"></script>
<script src="js/script.js"></script>
</body>
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">
Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<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">Modal title</h4>
</div>
<div class="modal-body">
<video controls height="400" width="400" poster="images/amit.jpg">
<source src="images/big_buck_bunny.mp4" type="video/mp4">
</video>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Tested in Google Chrome and Firefox was working as expected.
Please note : I used bootstrap.min.js of version v2.3.1, Please check if u are using an older version.
Cheers!!
Related
The command below works but the main page is waiting for iframe to load opening for him takes a long time sometimes.
How can I get the iframe to load just by clicking the shortcut.
<li>
carlist
</li>
<div class="modal fade" id="carlist" tabindex="-1" role="dialog" data-toggle="modal3" aria-labelledby="myModalLabel" data-backdrop="false">
<div class="modal-dialog modal-fluid modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Car List</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
</div>
<iframe src="carlist.aspx" width="100%" height="500"></iframe>
</div>
Maybe you could use a button. When onClick you try to open the iframe.
Is carlist.aspx part of your project?
I have two modals created with bootstrap - one for sign in and one for sign up. In each modal I have a link which I want it to refer to the other modal. E.g the sign up modal is open, registered users can click a link inside the sign up modal in order to sign in, and vice versa.
How can I close the sign up div when clicking the sign in link and open the sign in div instead?
complete code in here:
https://jsfiddle.net/f9r3ttpw/
This is the example starting code for the sign up modal:
<div class="modal modal-backdrop fade" id="myModalJoin" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-contentJoin">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close"><span aria-hidden="true">
<span class="glyphicon glyphicon-remove-sign"></span></button>
<h2 class="modal-title join" id="myModalLabel"></h2>
</div>
<div class="modal-body">
Hi Here is working code
Java script
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("#myModal").modal('show');
});
$("#btn2").click(function(){
$("#myModal2").modal('show');
});
$("#login").click(function(){
$("#myModal").modal('hide');
$("#myModal2").modal('show');
});
$("#singup").click(function(){
$("#myModal2").modal('hide');
$("#myModal").modal('show');
});
});
</script>
HTML
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
sign up login
<!-- Modal HTML -->
<div id="myModal" 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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Sign up code here?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</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>
<button type="button" id="login" class="btn btn-primary">login</button>
</div>
</div>
</div>
</div>
<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">Confirmation</h4>
</div>
<div class="modal-body">
<p>Login code here?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</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>
<button type="button" id="singup" class="btn btn-primary">sign up</button>
</div>
</div>
</div>
</div>
</div>
Twitter Bootstrap has option to open and hide modal window. You just need to call methods properly For example
$(document).ready(function(){
$(".modal1.show").click(function(){
$("#myModal2").modal('hide');
});
$(".modal2.show").click(function(){
$("#myModal1").modal('hide');
});
});
I have been using BT3 with a modal window (remote data).
Why BT3 doesn't render select input element from remote content (show.php).
Select element looks normal. I need to have it like from BT3 style.
The same issue are with checkbox elements.
<a data-toggle="modal" href="show.php" data-target="#myModal">Click me !</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Modal title</h4>
</div>
<div class="modal-body"><div class="te"></div></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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
show.php:
<select>
<option value="1">TEST</option>
<select>
I am using a third party plugin and pulling in the shortcode (NextGen Gallery plugin) which works perfectly - but when you click on the image it moves to a new browser window to show the full screen image. I am wondering how I wrap shortcode to show within the modal?
<a href="#gallery" data-toggle="modal">
<?php echo do_shortcode('[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_thumbnails" excludes="4,6" gallery_height="400"]'); ?>
</a>
Here is my modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="margin-top:200px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Club video</h4>
</div>
<div class="modal-body">
<iframe width="100%" height="500" src="//www.youtube.com/embed/4UnLo57BhEA" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I am a little stuck for ideas... :S
Below i have listed my links for the head and my links at the bottom of the page. The modal is not loading and i am not sure why, i believe this is an issue with my linking of the files.
Head links:
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/carousel.css" rel="stylesheet">
Footer:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
Links below footer:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.js"></script>
Here's a working jsFiddle with almost your exact HTML, the only differences are that I'm linking to CDN versions of jQuery, Bootstrap 3 CSS and Bootstrap 3 JS
As others have suggested, double check all the CSS and JS files are actually loading and there isn't a path issue
Check all your Bootstrap CSS and JS files are consistent and for Bootstrap 3
Comment out the carousel.css file, to verify there isn't a conflict there
HTML
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</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>