Question

该网站正在使用WordPress和优雅主题的Divi主题构建。

在理想的世界中，我希望每个Vimeo嵌入以下网站（http://robertdelmaestro.com/robert-del-maestro/）以产生以下影响：

悬停时播放。不悬停时暂停。删除控件（仅使用嵌入不可能）。只需单击即可全屏打开视频。

到目前为止，我看到的所有代码都基于Froogaloop，Vimeo不再推荐。

此外，我还看到了Vimeo正在尝试将功能添加到iframe链接的背景= 1的功能。但这似乎需要额外的参数来获得我想要的效果。

显然这段代码会移除悬停时的播放和暂停按钮，这几乎就是我要找的 - Hide pause/play button on vimeo iframe on hover

通过引用代码而不是他的帖子 - Play vimeo videos on hover

，我得到了一些工作

我想我需要使用新的API或oAuth方式，但我不知道如何转换我在此代码笔中的代码（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);
    });
});

非常感谢任何帮助。

操纵Vimeo嵌入

0 个答案: