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

Question

我已经使用 vimeo 生成的代码将我的视频嵌入到 wix 网站（使用他们的 HTML 组件工具）。我调整了代码，使其在页面加载时自动播放，并且在调整浏览器 window（加上网页的全宽）时响应。使用的代码是：

<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 = {} 部分，但这并不能使它成为 responsive/full 宽度。

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

Answer 1

设置容器和 iframe 的 CSS 宽度一定有帮助。下面的代码以全角显示视频，UNMUTE 按钮按预期工作。

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

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

Unmute button for responsive embedded vimeo video

html

button

vimeo-player