BootStrap 3 Dynamic YouTube AutoPlay and RESPONSIVE CSS in place

This script uses data tags to work with YouTube embedded calls. This makes video modals ever than ever without any plugin ! Super lightweight script that uses the Bootstrap framework with the introduction of only ONE new data-tag.

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-theme.css">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="https://www.youtube.com/watch?v=3u1fu6f8Hto">VIDEO</a>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <div>
                    <iframe width="100%" height="350" src=""></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

/***** MODAL PROPERTIES *****/
 .modal-content {
    -webkit-box-shadow: none;
    box-shadow: none;
    background:transparent;
    border:none;
    outline:none;
}
.modal-content iframe {
    border:none;
    padding:0;
    margin:0;
}
.close {
    font-size: 80px;
    margin:-20px 0 0 0;
}
/***** MEDIA QUERIES *****/
 @media only screen and (max-width: 641px) {
    /***** MODAL PROPERTIES *****/
    .modal-body {
        height:100px;
        padding:0;
        margin: 0;
    }
    .modal-content {
        padding:0;
        margin: 0;
    }
    .modal-dialog {
        position: relative;
        width: auto;
        margin: 15px;
    }
    .close {
        margin:-12px 0 0 0;
    }
}
@media only screen and (min-width: 768px) {
    /***** MODAL PROPERTIES *****/
    .close {
        font-size: 80px;
        margin:30px -43px -20px 100px;
    }
}

JavaScript

autoPlayYouTubeModal();

  //FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
  function autoPlayYouTubeModal() {
      var trigger = $("body").find('[data-toggle="modal"]');
      trigger.click(function () {
          var theModal = $(this).data("target"),
              videoSRC = $(this).attr("data-theVideo"),
              videoSRCauto = videoSRC + "?autoplay=1";
          $(theModal + ' iframe').attr('src', videoSRCauto);
          $(theModal + ' button.close').click(function () {
              $(theModal + ' iframe').attr('src', videoSRC);
          });
          $('.modal').click(function () {
              $(theModal + ' iframe').attr('src', videoSRC);
          });
      });
  }