如何解决响应式嵌入式 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。