单击父项 Div，隐藏包含 Vimeo Iframe 的叠加层

Question

这可能是不可能的，但我正在尝试在 .video-wrapper 的右侧制作一个覆盖框向右滑动并在单击 .video-wrapper div 时保持隐藏。

我已经使 .slide-txt 叠加在鼠标悬停时滑动。但是，当您将光标从 .video-wrapper 上移开时，它又会回来。 我希望它保持隐藏状态。

有什么想法吗？我已经尝试了一切...制作一个绝对 a#hide 元素，但它显然被 iframe z-index 覆盖了。我需要播放按钮是可点击的，所以我不知道该怎么做，除非 vimeo 按钮本身发生了某种事件。

$(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

谢谢凯青。这是我使用 API 事件侦听器使用 .on() 得出的结果。我想我明白了！

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%);
}

这是笔 --> https://codepen.io/toolbox666/pen/xxKVxxw

单击父项 Div，隐藏包含 Vimeo Iframe 的叠加层

Click On Parent Div, Hide Overlay that contains Vimeo Iframe

javascript

css

jquery

animation

vimeo-player