Play Video In Modal Popup
Play Youtube video or local video in Bootstrap Modal Popup. Create a bootstrap modal popup to play a youtube video or local video.
Play local video in modal popup Play youtube video in modal popup
To Play Video in bootstrap modal popup which takes following steps:-
- Include the css and js file of bootstrap.
- Give the unique id name of modal popup and write javscript for on load show modal popup at to bottom of page.
- Copy the enter popup code and paste inside the page bottom just above the js files.
- Html
- JavaScript
- Example
<!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <video id="" width="100%" controls poster="video/thumb.jpg"> <source src="video/Login_via_Lynda_dot_com.mp4" type="video/mp4"> <source src="video/Login_via_Lynda_dot_com.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
<script type="text/javascript"> $(document).ready(function(){ $('#exampleModal').modal({ show: false }).on('hidden.bs.modal', function(){ $(this).find('video')[0].pause(); }); }); </script>
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="bootstrap.min.css"> <title>Hello, world!</title> </head> <body> <h1>On page load show Modal Popup !</h1> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <video id="" width="100%" controls poster="video/thumb.jpg"> <source src="video/Login_via_Lynda_dot_com.mp4" type="video/mp4"> <source src="video/Login_via_Lynda_dot_com.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://khaalipaper.com/js/jquery-3.2.1.min.js"></script> <script src="bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#exampleModal').modal({ show: false }).on('hidden.bs.modal', function(){ $(this).find('video')[0].pause(); }); }); </script> </body> </html>
In this tutorial we learn that how to create bootstrap modal poup on page load using bootstrap css and js file, have to include to initialization javascript code for a default popup open on page load.
Play youtube video in modal popup
Html
<a href="#" data-toggle="modal" data-target="#youtubeVideo">Youtube Video in Popup</a> <div class="modal-body"> <iframe width="100%" height="315" src="https://www.youtube.com/embed/W26JgQW7Uss" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div>
Javascript
<script> $(document).ready(function() { $('#youtubeVideo').on('hidden.bs.modal', function() { var $this = $(this).find('iframe'), tempSrc = $this.attr('src'); $this.attr('src', ""); $this.attr('src', tempSrc); }); }); </script>
Stop vido after closing the modal popup
<script> $('#html5Video').on('hidden.bs.modal', function() { var html5Video = document.getElementById("htmlVideo"); if (html5Video != null) { html5Video.pause(); html5Video.currentTime = 0; } }); </script>
Play any video in popup
You can customize this code further as per your requirement.