LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Lazy Load Youtube Embeds


CSS
.modal-header {
  border: none;
}

.youtube-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: auto;
  max-width: 100%;
  background-color: #333;
}
.youtube-wrap iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.youtube-wrap img {
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: 777;
}
.youtube-wrap .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 888;
  color: #ffffff;
  cursor: pointer;
  text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.65);
  opacity: .85;
  transition: 200ms opacity linear;
}
.youtube-wrap .play-btn:hover {
  opacity: 1;
}
JS
$(function() {
  
  //Loop through all of the modal buttons
  $(".video-modal-btn").each(function() {
    
    //Find associated video modal
    var theModal = $(this).data("target"),
      videoID = $(this).attr("data-video"),
      placeHldr = "https://img.youtube.com/vi/" + videoID + "/sddefault.jpg";

    //Load placeholder image
    var image = "";
    $(theModal)
      .find(".youtube-wrap")
      .append(image);

    //Fire up the iframe
    // $(this).on("click", function() {
    //   var iframe =
    //     "";
    //   $(theModal)
    //     .find(".youtube-wrap")
    //     .html(iframe);
    // });

    //Fire up the iframe
    $(theModal).find(".youtube-wrap .play-btn").on("click", function() {
      var iframe =
        "";
      $(theModal)
        .find(".youtube-wrap")
        .append(iframe);
    });
    
  });
  
  $('.video-modal').on('hidden.bs.modal', function() {
      $(this).find('iframe').remove();
   });
  
});
Term
Sat, 04/14/2018 - 20:44

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv