单击父 div，隐藏包含 Vimeo iframe 的叠加层答案

【问题标题】：Click On Parent Div, Hide Overlay that contains Vimeo Iframe单击父 div，隐藏包含 Vimeo iframe 的叠加层
【发布时间】：2019-08-13 20:11:50
【问题描述】：

这可能是不可能的，但我试图在.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>

【问题讨论】：

github.com/vimeo/player.js - 您可能希望使用他们提供的 js api 将事件附加到播放侦听器。这就是您将禁用悬停文本的地方

标签： javascript jquery css animation vimeo-player

【解决方案1】：

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

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

【讨论】：