JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<script src="https://cdn.embedly.com/widgets/platform.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.css">
<div class="row">
  <div class="small-8 columns small-centered text-right">
    <a class="button">Play</a>
  </div>
</div>

<div class="row">
  <div class="small-10 columns small-centered">
    <blockquote class="embedly-card" data-card-key="1d5c48f7edc34c54bdae4c37b681ea2b">
      <h4><a href="https://vimeo.com/158773447">Seeking Nirvana Pt. 2 ~ Cabin Fever</a></h4>
      <p>Childhood friends embark on a journey past roads-end. Far from civilization, deep in the wilds of British Columbia, time slows as they align with their surroundings. Battling blizzards they quest towards untracked landscapes of powder glory. Through
        trial and triumph they tirelessly press on. The snow falls, the angst builds.</p>
    </blockquote>
  </div>
</div>
<div class="row">
  <div class="small-10 columns small-centered">
    <div class="embedly-responsive" style="position: relative;padding-bottom: 41.6667%;height: 0;overflow: hidden;">

      <iframe class="embedly-embed" frameborder="0" scrolling="no" allowfullscreen src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F158773447&url=https%3A%2F%2Fvimeo.com%2F158773447&type=text%2Fhtml&schema=vimeo"
      width="1920" height="800" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></iframe>
    </div>
  </div>
</div>

CSS

.button {
  width: 100%;
  margin: 2rem 0;
}

JavaScript

var players = [];

embedly('player', function(player) {
  players.push(player);
});

$('.button').on('click', function() {
  players.forEach(function(player) {
    player.play();
  });
  return false;
});