Click On Parent Div, Hide Overlay that contains Vimeo Iframe

Question

This might not be possible, but I am trying to make an overlay box on the right side of .video-wrapper slide right and stay hidden when the .video-wrapper div is clicked.

I've already made the .slide-txt overlay slide right on hover. But when you take your cursor off of .video-wrapper, it comes back. I want it to stay hidden.

Any thoughts? I've tried everything...making an absolute a#hide element, but it obviously is being overridden by the iframe z-index. I need the play button to be clickable, so I don't see how I can do it, unless I have some sort of event happen with the vimeo button itself.

$(document).ready(function(){
  $("a#hide").click(function(){
    $(".slide-txt").addClass('hide');
  });
});

.video-wrapper{
 width: 100%;
 height: 360px;
 position: relative;
   overflow: hidden !important;
}
a#hide{
 position: absolute;
 width: 100%;
 height: 100%;
 z-index: 12;
 background: rgba(255,255,255,.1);
}
.slide-txt{
 position: absolute;
 right: 0;
 top:0;
 width: 20%;
 height: 88%;
 padding: 3%;
 background: rgba(0,0,0,.7);
 color: #fff !important;
 z-index: 2;
 transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 display: block;
}

.video-wrapper:hover .slide-txt{
 transform: translateX(20%);
 right: -150px;
 opacity: 0;
}
.slide-txt.hide{
 display: none; 
}

<div class="video-wrapper">
<a href="#" id="hide">
<iframe class="change" src="https://player.vimeo.com/video/343081192?" width="640" height="360" frameborder="0"webkitAllowFullScreen mozallowfullscreen allowFullScreen ></iframe>
<div class="slide-txt">
<h2>
Test video
</h2>
</div>
</a>
</div>

Answer 1

Thanks Kai Qing. Here is what I figured out using the API Event Listener using .on(). I think I got it!

HTML

<div class="video-wrapper">
<iframe src="https://player.vimeo.com/video/343081192?api=1" width="640" height="360" frameborder="0"webkitAllowFullScreen mozallowfullscreen allowFullScreen ></iframe>
<div class="slide-txt">
<h2>
Test video
</h2>
</div>
</div>

Javascript

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('play', function() {
$(".player.vp-controls.play").click(function(){
$(".slide-txt").addClass('hide');
    });
});

player.getVideoTitle().then(function(title) {
    console.log('title:', title);
});
    player.on('play', function(data) {
$(".slide-txt").addClass('hide');
    });

CSS

 .video-wrapper{
 width: 640px;
 height: 360px;
 position: relative;
 overflow: hidden !important;
 margin: 0px auto;
}

.slide-txt{
 position: absolute;
 right: 0;
 top:0;
 width: 20%;
 height: 88%;
 padding: 3%;
 background: rgba(0,0,0,.7);
 color: #fff !important;
 z-index: 2;
 transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 display: block;
}

.slide-txt.hide{
right: -170px;
transform: translateX(5%);
}

Here is the Pen --> https://codepen.io/toolbox666/pen/xxKVxxw