I have used the vimeo generated code to embed my video in a wix website (using their HTML component tool). I've tweaked the code so it autoplays when the page loads, and it is responsive on resizing the browser window (plus full width on the webpage). The code used is:
<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>
I saw someone use some neat code to add an unmute button to their video, but the code generates a very small video area on the website, rather than the full width, responsive version I'm trying to get. Here is the code they used:
<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>
I tried adding in
width: 100%
to the var options = {} part of the code, but this doesn't work to make it responsive/full width.
I'd be incredibly grateful if someone was able to help amalgamate my original code, with the unmute button code so I can finally get it working. Thank you so much for your help with this.
Setting the CSS width for container and iframe must help. The code below shows the video in full-width and UNMUTE button works as expected.
<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>