JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<div class="container">
<p class="container-top dimmable">Before</p>
<iframe id="player1" src="http://player.vimeo.com/video/67658001?api=1&player_id=player1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p class="container-bottom dimmable">After</p>
</div>

CSS

body {
    background-color: #fff;
    font-family: "Open Sans", sans-serif;
    margin: 0;
    padding: 0;
    -webkit-transition: all 2s;
    transition: all 2s;
}

.container {
    margin: 0 auto;
    width: 500px;
}

body.dim {
    background-color: #000;
}

body .dimmable {
    -webkit-transition: all 2s;
    transition: all 2s;
}

body.dim .dimmable {
    opacity: 0.25;
    -webkit-transition: all 2s;
    transition: all 2s;
}

JavaScript

(function () {
    function dim () {
            document.body.classList.add('dim');
    }
    
    function undim () {
            document.body.classList.remove('dim');
    }
    
    var player = $f(document.getElementById('player1'));

    
    player.addEvent('ready', function () {

        player.addEvent('play', dim);
        player.addEvent('pause', undim);        
        player.addEvent('finish', undim);        
    });
}());