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?api=1&player_id=vimeoplayer" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

CSS

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

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

.standard{
  max-height: 380px !important;
}

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

@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'),
      f = $('iframe'),
      $playButton = $(".play"),
      $itemsToFadeOut = $(".vid-cap, .ghost, .play"),
      $video = f[0],
      url = f.attr('src').split('?')[0],
      activeVideoClass = "video-started",
      standardClass = "standard";



  // setup fitVids
  parent.fitVids();

  // Listen for messages from the player
  if (window.addEventListener){
    window.addEventListener('message', onMessageReceived, false);
  }
  else {
    window.attachEvent('onmessage', onMessageReceived, false);
  }

  // Handle messages received from the player
  function onMessageReceived(e) {
    var data = JSON.parse(e.data);

    switch (data.event) {
      case 'ready':
        onReady();
        break;

      case 'pause':
        onPause();
        break;

      case 'finish':
        onFinish();
        break;
    }
  }

  // Call the API when a button is pressed
  $('.play').on('click', function() {


    // grab height of video
    var videoHeight = f.height();

    // add class to hero when video is triggered
    parent.addClass(activeVideoClass);
    parent.removeClass(standardClass);
    // fade out the play button
    $(this).fadeOut("fast");

    // fade out poster image, overlay, and heading
    $itemsToFadeOut.fadeOut();

    // toggle accessibility features
    f.attr({
      "aria-hidden" : "false",
      "tabindex" : "0"
    });

    // set focus to video for accessibility control
    f.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[0].contentWindow.postMessage(JSON.stringify(data), url);
  }


  // Helper function for sending a message to the player
  function post(action, value) {
    var data = { method: action };

    if (value) {
      data.value = value;
    }

 ...