响应式嵌入式 vimeo 视频的取消静音按钮

问题描述

我使用 vimeo 生成代码将我的视频嵌入到 wix 网站中(使用他们的 HTML 组件工具)。我已经调整了代码,以便它在页面加载时自动播放,并且可以响应调整浏览器窗口的大小(加上网页上的全宽)。使用的代码是:

<div style="padding:42.6% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/558081433?autoplay=1&muted=1&loop=1&autopause=0" 
frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen 

style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Anthemic Piano">
</iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

我看到有人使用一些简洁的代码向他们的视频添加取消静音按钮,但该代码在网站上生成一个非常小的视频区域,而不是我试图获得的全宽响应版本。这是他们使用的代码

<button onclick="unmute()">
    UNMUTE
</button>
<div id="vimeo-player1"> </div>
<script>
    var options = {
        id: 194500280,background: true
    };
    var vid1 = new Vimeo.Player('vimeo-player1',options);
</script>
<script>
    function unmute() {
        vid1.setVolume(1);
    };  
</script>

我尝试添加

width: 100%

代码var options = {} 部分,但这并不能使其具有响应性/全宽。

如果有人能够帮助合并我的原始代码和取消静音按钮代码,我将非常感激,这样我终于可以让它工作了。非常感谢您对此提供的帮助。

解决方法

为容器和 iframe 设置 CSS 宽度必须有所帮助。下面的代码以全角显示视频,取消静音按钮按预期工作。

<style>
.container { 
height:95%;
width:100%;  
}
.container iframe{  
  width: 100%;
  height: 100%;
}

</style>

<script src="https://player.vimeo.com/api/player.js"></script>
<div class="container" id="vimeo-player1"> </div>
<button onclick="unmute()">
    UNMUTE
</button>

<script>
    var options = {
        id: 558081433,background: true,muted:1,loop:1
        
    };
    var vid1 = new Vimeo.Player('vimeo-player1',options);
    vid1.play();
</script>
<script>
    function unmute() {
        vid1.setVolume(1);
    };  
</script>