Edit Question - KnowledgeHub

Title Body

I need to be able to autoplay a youtube video when a Twitter Bootstrap modal is opened and subsequently stop that video on close. I know this question has been asked before, but the answers I can find would lead to a LOT of javascript code for a page that contains MANY videos and I am trying to cut down on the bloat. So far I have the following working for individual videos, but the issue is that each modal and each video must have this javascript code repeated with the proper variables. $('#vidThumbnail-1').click(function () { var src = 'http://www.youtube.com/embed/8bKmrhI-YT8?&amp;autoplay=1'; $('#vid1').modal('show'); $('#vid1 iframe').attr('src', src); //Fit Vids Implamented Below for Mobile Compatibility $("#vid1Thumbnail-1 iframe").wrap("<div class='flex-video'/>"); $(".flex-video").fitVids(); }); $('#vid1 button').click(function () { $('#vid1 iframe').removeAttr('src'); }); HTML: <div id="vidThumbnail-1"><img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg" /></div> <div id="vid1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-body"> <iframe src="http://www.youtube.com/embed/8bKmrhI-YT8" width="640" height="360" frameborder="0" allowfullscreen></iframe> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> </div> This gets bloated when you have 20 videos and 20 modals! Is there a way to utilize the Data Attributes method of initiating a modal built-into bootstrap rather than call it individually, while still modifying the iframe src within only the target modal? The link to open the modal would then be: <a href="#vid1" role="button" data-toggle="modal"> <img src="http://img.you

Tags (comma-separated) Cancel