Cacher is the code snippet organizer for pro developers

* { margin: 0; padding: 0; }
a { text-decoration: none; }
$color_primary: #004eff;
$color_secondary: #ff2700;

@mixin transform($transform) {
  -ms-transform: $transform;
  -webkit-transform: $transform;
  transform: $transform;
}
.video-item { width: 100%; max-width: 600px; margin: 200px auto 0;
  figure { position: relative; width: 100%; font-size: 0;
    img { width: 100%; }
    a {
      &:before { content: ''; position: absolute; top: 50%; left: 50%; width: 65px; height: 65px; margin-top: -32.5px; margin-left: -32.5px; border-radius: 50%; background-color: rgba($color_primary, 0.9); z-index: 10; }
      &:after { content: ''; position: absolute; top: 50%; left: 50%; margin-top: -12.5px; margin-left: -7px; border: solid 13px transparent; border-left: solid 20px; border-left-color: #fff; z-index: 10; }
      &:hover {
        &:before { background-color: rgba($color_secondary, 0.9); }
      }
    }
  }
}
.modal-open { overflow: hidden; }

.lightbox { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,0.8); padding: 120px 10px; display: none; box-sizing: border-box; overflow: auto; z-index: 100; }

.popup-modal { position: relative; margin: 0 auto; display: none;
  .close { position: absolute; top: 18px; right: 30px; width: 28px; height: 28px; border: solid 1px $color_primary; border-radius: 50%; @include transform(rotate(45deg)); cursor: pointer;
    &:before { position: absolute; width: 14px; height: 2px; top: 50%; left: 50%; margin-left: -7px; background-color: $color_primary; content: ''; @include transform(translateY(-50%)); }
    &:after { position: absolute; width: 14px; height: 2px; top: 50%; right: 50%; margin-right: -7px; background-color: $color_primary; content: ''; @include transform(translateY(-50%) rotate(90deg)); }
    &:hover { border-color: $color_secondary;
      &:before { background-color: $color_secondary; }
      &:after { background-color: $color_secondary; }
    }
  }
}

.post-popup { width: 100%; max-width: 875px; background-color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.22);
  .popup-header { padding: 20px 30px; font-size: 14px; margin-right: 60px;
  }
  .popup-video { font-size: 0;
    video { width: 100%; }
    img { width: 100%; }
  }
  .popup-main { padding: 40px 30px;
    p { margin: 0 0 10px 0; }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

jQuery(function($){

    // Lightbox Triggers
    lightboxTrigger.videoBox();
    lightboxTrigger.modalBox();
  
});
/* ========================================================================= */
/* FUNCTION TO CREATE LIGHTBOX */
/* ========================================================================= */
var lightboxTrigger = {
    videoBox : function() {
        var self, link, target, video, videoSrc, toggle;
        link = $(".open-video-link");
        
        $(link).each(function() {
            self = $(this);
            target = self.attr("href");
            video = $(target).find(".popup-video iframe");
            videoSrc = video.attr("src");
        });
        
        $(link).each(function() {
            self = $(this);
            target = self.attr("href");
            video = $(target).find(".popup-video iframe");
            video.attr("src","");

            $(this).on("click", function(event) {
                event.preventDefault ? event.preventDefault() : event.returnValue = false;
                $(target).wrap( "<div class='lightbox'></div>" );
                $(".lightbox").fadeIn(300, function() {
                    $(target).fadeIn(0);
                    $("body").addClass("modal-open");
                    video.attr("src",videoSrc);
                    resizeIfame(video);
                });

                $("body").on("click", function(event) {
                    if(($(event.target).hasClass("lightbox") || $(event.target).hasClass("close")) && $(target).parent().hasClass("lightbox") ) {
                        $(".lightbox").fadeOut(300, function() {
                            $(target).hide(0);
                            $(target).unwrap();
                        });
                        $("body").removeClass("modal-open");
                        video.attr("src","");
                    }
                });
            });
        });
    },

    modalBox : function() {
        var link = $(".open-modal-link");
        $(link).on("click", function() {
            self = $(this);
            target = self.attr("href");
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
            $(target).wrap( "<div class='lightbox'></div>" );
            $(".lightbox").fadeIn(300, function() {
                $(target).fadeIn(0);
                $("body").addClass("modal-open");
            });

            $("body").on("click", function(event) {
                if(($(event.target).hasClass("lightbox") || $(event.target).hasClass("close")) && $(target).parent().hasClass("lightbox") ) {
                    $(".lightbox").fadeOut(300, function() {
                        $(target).hide(0);
                        $(target).unwrap();
                    });
                    $("body").removeClass("modal-open");
                }
            });
        });
    }

}


/* ========================================================================= */
/* RE FUNCTION */
/* ========================================================================= */
function resizeIfame(frame) {

    var oldWidth = $(frame).width();
    var oldHeight = $(frame).height();
    var propotion = oldHeight / oldWidth;
    var newHeight;

    $(frame).width('100%');
    newHeight = $(frame).width() * propotion;
    $(frame).height(newHeight);

    $(window).resize(function() {
        $(frame).width('100%');
        newHeight = $(frame).width() * propotion;
        $(frame).height(newHeight);
    });
}

<article class="video-item">
  <figure>
    <a href="#post-popup1" class="open-video-link"><img src="http://www.unsplash.it/320/185?image=085"></a>
  </figure>
</article>

<div id="post-popup1" class="post-popup popup-modal">
  <span class="close"></span>
  <div class="popup-header">
    <h4>Popup Header</h4>
  </div>
  <div class="popup-video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/TWluKrCIBSY?autoplay=1" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="popup-main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
  </div>
</div>