JSFiddle - React, Tailwind, and code Playground

by Khez

HTML

<script src="https://github.com/vimeo/player-api/raw/master/javascript/froogaloop.js"></script>
<input type="button" id="show_tide" class="vid" value="Show One" />
<input type="button" id="show_knew" class="vid" value="Show Two" />
<input type="button" id="underlay" value="Hide" />

<iframe id="tide" class="vim" src="http://player.vimeo.com/video/1747304?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="725" height="408"></iframe>
    <iframe id="knew" class="vim" src="http://player.vimeo.com/video/4622464?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="726" height="363"></iframe>

JavaScript

$('.vim, #underlay').hide();

$('.vid').click(function() {
    var id = $(this).attr("id").replace("show_","").toLowerCase();
    $('#' + id + ', #underlay').fadeIn(400);
});

$('#underlay').click(function() {
    $('.vim, #underlay').fadeOut(400);
    var players;
    players=$('.vim');

    $f(players[0]).api('pause');

    $f(players[1]).api('pause');
});