JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fitvids/1.0.3/jquery.fitvids.min.js"></script>
 <div class="video-hero">
    
  <div class="ghost">
    <div class="g-headline">DonorPro Software is for growth-focused nonprofits, like ACHIEVA</div>
    <a href="#0" class="play"><div class="fa fa-play-circle"></div></a>
    <div class="play-text">See Their Story</div>

  </div>

    
	<img class="vid-cap" src="http://cdn2.hubspot.net/hubfs/341117/DonorPro-Homepage-12-14/2015_Smart_Photos/Screen_Shot_2015-07-24_at_3.37.18_PM-719179-edited-820952-edited.png?t=1437766795811" alt="Achieva Building" />
	    <iframe src="https://player.vimeo.com/video/134162006?title=0&byline=0&portrait=0" width="1060" height="596" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="video" aria-hidden="true" tabindex="-1"></iframe>
	
</div>

<div class="video-container" style="display:none; max-width: 600px;   height: auto;   margin: 0 auto;   display: block;   float: none;">
    <iframe src="https://player.vimeo.com/video/134162006?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

CSS

.video-container{
    display:none !important;
}

.video-hero {
  max-height: 178px;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
  background: #000;
}

@media (min-width: 768px) {
  .video-hero {
    max-height: 380px;
  }
}

@media (max-width: 667px){
    .video-hero{
        display:none;
}

.video-container{
    display:block !important;
      margin-top: 35px;
}


    
}

.video-hero .fa-play-circle{
    z-index: 200;
  color: #fff;
  text-decoration: none;
  width: 70px;
  height: 70px;
  text-align: center;
  position: relative;
  font-size: 50px;
  margin: 12% auto -11px !important;
}

.video-hero .play-text{
text-align: center;
  font-family: 'roboto', sans-serif;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
}

.video-hero .vid-cap {
  width: 100%;
  height: auto;
  z-index: 100;
  position: relative;
}

.ghost {
  background: rgba(35,35,35,.4);
  z-index: 150;
  color: #FFF;
  width: 650px;
  height: 250px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right:0; 
  display: block;
  position:absolute;
}

.ghost a, .ghost a:hover, .ghost a:link, .ghost a:visited{
  color:#FFF !important;
  display:block;
  text-align:center;
}

.video-hero .video {
  top: 0;
  left: 0;
  z-index: 50;
}

.g-headline{
  text-align: center;
  font-size: 31px;
  font-family: 'roboto', sans-serif;
  font-weight: 300;
  width: 570px;
  margin: 0 auto;
  text-shadow: 0 0 10px rgba(0,0,0,.8);
  position: relative;
  top: 45px;
  line-height: 43px;
}

JavaScript

$(function(){

    var $parent = $('.video-hero'),
			$video = $parent.find('iframe'),
			$playButton = $(".play"),
			$itemsToFadeOut = $(".vid-cap, .ghost"),
			f = $video[0],
			url = $video.attr('src').split('?')[0],
			activeVideoClass = "video-started";

			// setup fitVids
			$parent.fitVids();

			// handle play click
			$playButton.click(function(e){
				
				e.preventDefault();
				
				// grab height of video
				var videoHeight = $video.height();
				
				// add class to hero when video is triggered
				$parent.addClass(activeVideoClass);
				
				// fade out the play button
				$(this).fadeOut("fast");
				
				// fade out poster image, overlay, and heading
				$itemsToFadeOut.fadeOut();
				
				// toggle accessibility features
				$video.attr({
					"aria-hidden" : "false",
					"tabindex" : "0"
				});
				
				// set focus to video for accessibility control
				$video.focus();
				
				// set height of hero based on height of video
				$parent.css("max-height",videoHeight).height(videoHeight);
				
				// send play command to Vimeo api
				runCommand('play');
				
			});

			// send play to vimeo api
			var runCommand = function(cmd){
				var data = {method : cmd};
				f.contentWindow.postMessage(JSON.stringify(data), url);
			}
			
			// handle resize
			$(window).resize(function(){
				var videoHeight = $video.height();
				if($(".video-started").size() === 1){
					$parent.height(videoHeight);
				}
			});
		
});