Bootstrap Modals & Youtube: Autoplay and Stop on Close

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?&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