How to affect Background Video element with code?

Design help General
#1

I created a test site:
http://background-video-speed.webflow.io/

Preview link:
https://preview.webflow.com/preview/background-video-speed?preview=48ac3cf0cc22890cd40cbecd272d5fb0

Question

  • How can I control the speed of the video with code? See code inside of Head in page settings.

Typical HTML5 video control code isn’t working since the background video element is contained inside of a hidden div apparently.

Thanks,
Bonnie

#2

Please post your project share link and website’s published URL when asking for help.

#4

The root element of the background video component is a div, which contains a standard video element.

You can inspect the test page below with developer tools to see how it works

http://sandbox-903b9c.webflow.io/video-test

#5

@samliew - thank you…so, looking at that with developer tools/inspect seems to indicate that the actual video code is hidden…so I can’t directly affect it with code?

It seems like the background video element contains the video code within a hidden div that I can’t give an ID to or manipulate.

Can you help further clarify?

#7

You can try to set this using custom code (in the <head> section):

http://www.w3schools.com/TAgs/av_prop_playbackrate.asp

#8

Hi @brryant!

Thanks so much for helping.

I had already included that code inside of the head section in my test link above (please see the preview link), however it seems to only control the container div, not the actual video itself. :frowning:

I can’t seem to figure out how to affect the background video itself since the Background Video element is contained within a div I can’t see. Any ideas?

Thanks!
Bonnie

#9

Thanks for sending me an email on the solution here @bduffley

You added the ID of video-loop to an element then used the following code (either in before </head> or before </body>, both work). Neat trick! :smiley:

<script>
window.onload = function(){
var vid = document.querySelector("#video-loop video");
vid.playbackRate = 0.5;
}
</script>

Thanks again! :metal:

#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.