Manipulating Vimeo Embeds

Question

The site is being built using Wordpress and the Divi Theme from Elegant themes.

In an ideal world I would like each Vimeo embed on the following site (http://robertdelmaestro.com/robert-del-maestro/) to have the following effects:

Play on hover. Pause when not hovered. Removal of controls (not possible using just the embed). To open the video in fullscreen with a single click.

All the code I have seen so far is based on Froogaloop which is no longer recommended by Vimeo.

Also I have seen a feature which Vimeo is experimenting with at the moment adding background=1 to the iframe link. But that seems to need extra parameters to get the effects I want.

Apparently this code removes the play and pause button on hover which is nearly what I’m looking for - Hide pause/play button on vimeo iframe on hover

I got something working by referencing the code not his post - Play vimeo videos on hover

I think I need to use the new API or oAuth way but I don’t know how to convert the code I have in this code pen (https://codepen.io/fathernugen/pen/RgOqyM)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div class="videoWrapper">

<iframe id="player1" class="product-card-media" src="https://player.vimeo.com/video/223342325?api=1&amp;player_id=player1" allowfullscreen="allowfullscreen" height="281" frameborder="0" width="500"></iframe>
<div class="videoinfo">
<h1>Soko Leipzig</h1>
<h2>UFA Drama</h2>
<h2>ZDF</h2>
</div>
</div>

.videoWrapper {z-index: 1; cursor: pointer;}
.videoinfo {z-index: 100; position: absolute; top: 10px; left: 10px;  }
.videoinfo h1 {color: #fff; font-size: 1em; font-weight: bold;}
.videoinfo h2 {opacity: 0;  transition:0.8s; color: #fff; font-size: 0.8em; padding: 0; margin: 0; font-weight: bold;}
.videoWrapper iframe:hover {   cursor: pointer;  -webkit-filter: brightness(60%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
.videoWrapper:hover h2 {opacity: 1; }

$('.product-card-media').mouseover(function(){
    var player = $("#" + this.id);
    froogaloop = $f(player[0].id);
    froogaloop.api('play');
    player.mouseout(function(){
        froogaloop.api('pause');
      controls = $(none);
    });
});

Any help would be greatly appreciated.