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.

by freedawirl

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="#video1" data-theVideo="//www.youtube.com/embed/8HAO1TlfXgQ">VIDEO1</a>

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#video2" data-theVideo="//www.youtube.com/embed/loFtozxZG0s">VIDEO2</a>

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#video3" data-theVideo="//www.youtube.com/embed/sIFYPQjYhv8?rel=0">VIDEO3</a>

<!--Videos -->
<div class="modal fade" id="video1" 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="100%" src=""></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="video2" 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="100%" src=""></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="video3" 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"...

CSS

/***** MODAL PROPERTIES *****/
/*Modal*/
 .modal-dialog {
}
.modal-dialog iframe {
    width: 100%;
    height: 567px;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-header {
    min-height: 16.43px;
    padding: 0px;
    border: none;
    background: transparent;
}
.modal-header .close {
    margin-top: 0px;
    padding: 0;
    cursor: pointer;
    background: #000;
    color: #fff;
    font-size: 40px;
    font-weight: 100;
    display: block;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: relative;
    right: -30px;
    top: 15px;
    z-index: 9;
    filter: alpha(opacity=100);
    opacity: 1;
}
.modal-body {
    padding: 0px;
}
.modal-content {
    background:transparent;
    background-clip: padding-box;
    border: none;
    border-radius: 0px;
    outline: 0;
    box-shadow:none;
}
.modal-footer {
    display:none;
}
 .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);
          });
      });
  }