Hi,
I need to add several videos from vimeo on a single page. They all need to autoplay, begin mute, loop and not have titles and show controls on hover. I have created a test page https://footprintentertainment.webflow.io/test with random videos which achieve this. However, when I put the sound up for one video, all three videos play their sound.
I wondered if anyone could shed some light on how I can revise this so that the sound only comes on for one video?
Thanks
Hi @sparky,
Not sure why you’re invoking the vimeo player API script since you don’t seem to make any API calls (all needed infos to generate the autoplay video is already in the iframe definition). If you really want to use the API, have a look here: Vimeo
You could with javascript create an array of all your videos, add an eventlistener on each of those videos to switch the volume on hover for example by using the player.serVolume() method more infos here: Vimeo
Hope that helps !
Thanks very much for your reply. I should probably have said in my original post that I’m not a developer and don’t know anything about coding. I copied and pasted the script from this thread Autoplay not working for vimeo video - #18 by Siton_Systems and added a little extra to make it loop.
I think what I am really hoping for is someone to give me a little piece of code to add to what I already have which will mean the volume will only be raised on the intended video without affecting the others. Is that possible or is it more complicated?
Thanks
Hi @sparky
Yes it is possible with javascript using the latest vimeo player API.
I wrote a short snipet for you, have a look.
Working prototype
https://codepen.io/anthonysalamin/pen/oRzRWd
Javascript
// on document ready
document.addEventListener("DOMContentLoaded", e => {
// execute constructor function
initVimeo();
});
// function declaration
function initVimeo() {
// create an array of all item
const items = document.getElementsByClassName("item");
for (let i = 0; i < items.length; i++) {
// get each single div element of the array
let item = items[i];
// find the .vimeo element within the element of the array
let vimeo_element = item.querySelector(".vimeo");
console.log(vimeo_element);
let vimeo_id = vimeo_element.getAttribute("id");
console.log(vimeo_id);
// player options
let options = {
id: vimeo_id,
autoplay: true,
autopause: 0,
loop: true,
muted: true,
responsive: true,
};
// player constructor
let player = new Vimeo.Player(vimeo_element, options);
} // end for loop
} // end function declaration
Hope that helps.
Thanks so much for taking the time to do this!
I have attempted to put the code in but am clearly putting it in the wrong place as the code actually appears on the page. https://footprintentertainment.webflow.io/test The sound still plays for all the videos when the sound is turned on for just one (in the prototype the volume comes on for the top video even if the volume is raised for the second video). However, it has had some sort of effect as if all the videos are stopped from playing and then you try playing them - only one can play at a time. A step in the right direction but still the issue with the sound remains.
Any ideas massively appreciated!
You need to delete your old embeds and replace them with the one I wrote.
The javascript code needs to be wrapped within tags and inserted before the end of the tag. Also, don’t forget to reference the vimeo player API source script before the javascript snipet itself, also wrap it inside the tag like so:
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
// on document ready
document.addEventListener("DOMContentLoaded", e => {
// execute constructor function
initVimeo();
});
// function declaration
function initVimeo() {
// create an array of all items
const items = document.getElementsByClassName("item");
for (let i = 0; i < items.length; i++) {
// get each single div element of the array
let item = items[i];
// find the .vimeo element within the element of the array
let vimeo_element = item.querySelector(".vimeo");
console.log(vimeo_element);
let vimeo_id = vimeo_element.getAttribute("id");
console.log(vimeo_id);
// player options
let options = {
id: vimeo_id,
autoplay: true,
autopause: 0,
loop: true,
muted: true,
responsive: true,
};
// player constructor
let player = new Vimeo.Player(vimeo_element, options);
} // end for loop
} // end function declaration
</script>
Also, not sure why you would like to play sound on multiple video ?
Thanks very much. I have absolutely no coding knowledge so figuring out where things go is a little tricky. Will give this a whirl.
Just to clarify - I don’t want sound to play on multiple videos. In fact I want the exact opposite. At the moment the sound is playing on multiple videos when the sound is turned up on just one. I want to stop that so that when the volume is raised on a video it only effects that video and not the others.
If i mange to put this code in correctly do you believe it will achieve that?
Isn’t that the case on the codepen I wrote ?
If you build the exact codepen structure on webflow yes, you should be able to achieve that.
That’s not how it works for me unfortunately. On the codepen both vids autoplay and are mute (which is how the should be). However, putting the volume up on one video also puts the volume up on the other video. Is that not what happens when you try?
On my end, using Chrome, only one video as the volume up when rising a specific video volume up. Haven’t tested any other browsers yet.
Ah, yes it works in Chrome and Safari. Not in Firefox though frustratingly!
In terms of adding the code, I take it I add an embed and paste in the html from your codepen (changing the vimeo id)? I’m not sure exactly where I should paste in the CSS and JS? I know you have said the JS needs to be wrapped within tags and inserted before the end of the tag but unfortunately this doesn’t mean much to me (sorry). Any chance you could translate into complete layman’s terms ie. paste this into this section?
Thanks again for all your help!
Sure, there you go:
I rebuild the codepen structure in Webflow:
https://preview.webflow.com/preview/vimeo-048173?utm_source=vimeo-048173&preview=c84c0df7aa713250f522dfea37215f22
Here is the live webflow prototype:
https://vimeo-048173.webflow.io/
The codepen again for your reference:
https://codepen.io/anthonysalamin/pen/oRzRWd
Here are the screenshot showing you where to paste the javascript and css:
Hope that helps.
Thanks you so much! It’s very kind of you to take the time.
I rather hate to ask but I seem to be missing something. I have opened your Webflow version and copied and pasted the code in the two areas indicated but I am not even seeing the embedded videos. The code also doesn’t seem to correspond to the original codepen? I’m also not clear where to paste the html if the javascript is going in the html editor?
Sorry! I have put it on a page called ‘Vimeo’. If you do get the chance to take a look that would be amazing!
You won’t be able to preview the vimeo video in the Webflow Designer since the players are dynamically being created by javascript after the page has loaded. You need to publish the page to see the videos like for every script you might use on a Webflow project.
Wich code doesn’t look like the one on Codepen ?
The item div is Webflow div element, the embed_vimeo div is a Webflow embed component, then inside the embed comes the rest of the HTML / CSS that you see in the Codepen.
I’m also not clear where to paste the html if the javascript is going in the html editor?
The javascript simply goes inside the custom code area of the page, before the end of the body tag like shown on the screenshot.
This works! (apart from in Firefox still, frustratingly). Thank you so much for your help and patience.
I have just replaced the vimeo ids and published Production For some reason the sound issue is back and the sound for both vids turns on. Everything is just as it was so no idea why this may be and wondered if you had any advise?
Thanks
