Master Snippet: Video Modal

Documentation:

Wrap anything with a data-video attribute within an a element to make it available to be embedded.

HTML:

<a href="#" data-video="https://www.youtube.com/embed/5uheU1klxbU?autoplay=1"></a> <div id="video-embed-modal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <button id="video-embed-modal-close" type="button" class="close" data-dismiss="modal">&times;</button> <iframe width="100%" height="315" src="" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div>

CSS:

#video-embed-modal .modal-content { margin-top: 60px; }

JS:

jQuery('[data-video]').click(function(e){ e.preventDefault(); var video = jQuery(this).attr('data-video'); var embed_modal = jQuery('#video-embed-modal'); embed_modal.find('iframe').attr('src', video); embed_modal.modal("show"); }); jQuery(document).on('hidden.bs.modal','#video-embed-modal', function () { jQuery('#video-embed-modal').find('iframe').attr('src', ''); });