Placeholder image for video with button onclick load iframe. You can switch this around between youtube and vimeo or any other thirdparty video player.

responsive-video.html

<style>
.btn-video {
    font-family: 'Montserrat', sans-serif;
    @include button-size(20px, 60px, 16px, 14px, 16px);
    @include button-variant(#FFF, rgba(0,0,0,0.5), #FFF);

    &:visited, &:hover, &:active {
        @include button-variant(#FFF, rgba(0,0,0,0.7), #FFF);
        -webkit-box-shadow: 0px 1px 7px -2px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 1px 7px -2px rgba(0,0,0,0.75);
        box-shadow: 0px 1px 7px -2px rgba(0,0,0,0.75);
    }

}

.video-background-landing {
    position: relative;
    cursor: pointer;
    background-color: rgba(255,255,255,0.3);
    border: solid 2px #FFF;
}

.watch-video-button-landing {
    position: absolute;
    top: 70%;
    left: 50%;
    margin-top: -30px;
    margin-left: -95px;
    z-index: 9;
    padding: 10px 20px;
}
</style>

<div class="col-sm-8 col-md-6 col-lg-6 video-position">
    <div class="video-background-landing embed-responsive embed-responsive-16by9" data-vimeoid="186219543">
        <div class="embed-responsive-item"></div>
        <span class="btn btn-video watch-video-button-landing">WATCH VIDEO <i class="fa fa-chevron-circle-right min-padding-all"></i></span>
    </div>
</div>

<script>
// Banner video
$('.video-background-landing').click(function(){
  $(this).parent().html('<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://player.vimeo.com/video/'+$(this).data('vimeoid')+'?portrait=0&title=0&color=bf1f48&badge=0&byline=0&autoplay=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>');
});
</script>