Bootstrap Demo
Bootstrap Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.css"> </head> <body> <!-- --> <div class="container"> <h3>A YouTube video demo</h3> <p><a href="https://www.youtube.com/watch?v=1FnMDubA25A" data-title="Bootstrap" data-footer="Bootstrap tutorial 21 - Carousel (Slideshow)" data-toggle="lightbox">A Bootstrap tutorial</a></p> </div> <!-- --> <script src="//code.jquery.com/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.js"></script> <script type="text/javascript"> $(document).ready(function ($) { // delegate calls to data-toggle="lightbox" $(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) { event.preventDefault(); return $(this).ekkoLightbox({ }); }); }); </script> </body> </html>
A YouTube video demo
A Bootstrap tutorial