3 Modal YouTube Videos

3-modal-youtube-videos.markdown

3 Modal YouTube Videos

A layout for 3 modal videos from YouTube, Uses Bootstrap4, jQuery and feather icons.

The YouTube videos stop playing when you close the modal.

A Pen by Yaakov Shore on CodePen.

License.

index.html

<section id="videos">
        <div class="container-fluid">
            <div class="container">
            <div class="row">
            <div class="col-md-12">
                <h1 class="text-primary">Video Highlights</h1>
                <p>Voluptate laborum nulla do pariatur exercitation. Aliquip esse ut ipsum nisi nostrud excepteur magna reprehenderit qui. Cillum adipisicing eiusmod culpa commodo officia mollit ipsum. Velit sit culpa incididunt nostrud magna.</p><hr>
            </div>
            </div>
            <div class="row">
            <div id="event-vid1" class="col-md-4 event-vid"><button type="button" class="gradient-css" role="button" data-toggle="modal" data-target="#myModal1"><i data-feather="play-circle"></i> Play</button></div>
            <div id="event-vid2" class="col-md-4 event-vid"><button type="button" class="gradient-css" data-toggle="modal" data-target="#myModal2"><i data-feather="play-circle"></i> Play</button></div> 
            <div id="event-vid3" class="col-md-4 event-vid"><button type="button" id="modalBtn3" class="gradient-css" data-toggle="modal" data-target="#myModal3"><i data-feather="play-circle"></i> Play</button></div>
        </div>
        </div>
        

    <!-- Modal1 -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog  modal-dialog-centered modal-lg">
            <div class="modal-content">
        
                <div class="modal-body">
                <div id="ytplayer1"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal2 -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog  modal-dialog-centered modal-lg">
        <div class="modal-content">
    
            <div class="modal-body">
                <div id="ytplayer2"></div>
            </div>
        </div>
    </div>
    </div>

    <!-- Modal2 -->
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog  modal-dialog-centered modal-lg">
        <div class="modal-content">
    
            <div class="modal-body">
                <div id="ytplayer3"></div>
            </div>
        </div>
    </div>
    </div>
          
        
        </div>
    </section>
    

script.js

feather.replace();

// info for the video players
var yt1, yt2, yt3;

yt1 = {
  "div" : "#event-vid1",
  "modal": "#myModal1",
  "videoId": "WdeFxB_ZibU"
};

yt2 = {
  "div" : "#event-vid2",
  "modal": "#myModal2",
  "videoId": "bx8wnsLRC1g"
};

yt3 = {
  "div" : "#event-vid3",
  "modal": "#myModal3",
  "videoId": "DtocUZ0vO3A"
};

ytVids = [yt1, yt2, yt3];


var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api?modestbranding=1&showinfo=0";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer1', {
      height: '360',
      width: '640',
      videoId: 'WdeFxB_ZibU',
      playerVars: {'modestbranding': 1}
    });
    player = new YT.Player('ytplayer2', {
      height: '360',
      width: '640',
      videoId: 'bx8wnsLRC1g',
      playerVars: {'modestbranding': 1}
    });
    player = new YT.Player('ytplayer3', {
      height: '360',
      width: '640',
      videoId: 'DtocUZ0vO3A',
      playerVars: {'modestbranding': 1}
    });
  }

  
function playModal(divId, modId){
  // Makes the entire div clickable
  jQuery(divId).click(function() {
    jQuery(modId).modal('toggle');
  });
  // Makes YouTube video stop playing when the modal is hidden
     jQuery(modId).on('hidden.bs.modal', function (e) {
          jQuery(modId + " iframe").attr("src", jQuery( modId + " iframe").attr("src"));
      });
}


ytVids.forEach(function(vid){
  playModal(vid.div, vid.modal);
});

// for screens below 700px width replace modal with link.
if( jQuery(document).width() < 700 ){
  jQuery('.modal.fade').remove();
  

  ytVids.forEach(function(vid){
  var html = '<a class="gradient-css" style="padding: 10px 15px;"'; 
  html += 'href="https://www.youtube.com/watch?v=' + vid.videoId + '">';
  html += '<i data-feather="play-circle"></i> Play</a>';
  jQuery(vid.div).html(html);
  // make the entire link clickable for link  
  jQuery(vid.div).click(function(){
    window.location = jQuery(this).find("a").attr("href"); 
    return false;

 });
});
 
feather.replace();

    
}

scripts

<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>

style.css

#videos {
    background-color: #dae2e0;
    text-align: center;
    padding: 40px 0px;
  }
  
  #videos .text-primary {
    color: #25A8DF!important;
  }

  #videos h1 {
    text-transform: uppercase;
}
  
a:hover {
  text-decoration: none;
}

  #videos > .container {
    text-align: center;
    padding: 30px;
  }
  
  .feather{
    vertical-align: middle;
    width: 30px;
    height: 30px;
    padding-bottom:5px;
  }
  
  .feather:hover {
    color: #fff;
  }

  #event-vid1 {
    background: linear-gradient(to left, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .5) 100%), url(http://blog.youngstartup.com/wp-content/uploads/2018/07/vid1-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }

  #event-vid2 {
    background: linear-gradient(to left, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .5) 100%), url(http://blog.youngstartup.com/wp-content/uploads/2018/07/vid2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #event-vid3 {
    background: linear-gradient(to left, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .5) 100%), url(http://blog.youngstartup.com/wp-content/uploads/2018/07/vid3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  
  .event-vid {
    width: 100%;
      padding-top: 80px;
      height: 200px;
      -moz-box-shadow:    inset 0 0 10px #dae2e0;
      -webkit-box-shadow: inset 0 0 10px #dae2e0;
      box-shadow:         inset 20px 0 0 #dae2e0;
    margin-top:10px;
      cursor: pointer;
  /*   filter: grayscale(100%); */
  }
  
  
  
  .gradient-css {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 110px;
    height: 35px;
    cursor: pointer;
    margin: 0 auto;
    border: 2.3px solid #00E7FF;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    font: normal 20px/30px "Advent Pro", Helvetica, sans-serif;
    font-weight: bold;
    color: #00E7FF;
    text-align: center;
    vertical-align: middle;
    -o-text-overflow: clip;
    text-overflow: clip;
    letter-spacing: 1px;
    background: rgba(0,0,0,0);
    -webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
  transition: .5s;
  }
  
  .gradient-css:hover {
    color: rgba(255,255,255,1);
      background: linear-gradient(to left, #00E7FF, #25A8DF);
  
  }
  
  .gradient-css:active {
    background: linear-gradient(to left, #00E7FF, #3273dc);
    background: linear-gradient(to left, #00E7FF, #3273dc);
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
  }
  

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />