I am trying to get an embedded video to play once the “watch demo” button is clicked.
Here is my site Read-Only: https://preview.webflow.com/preview/code-d142c6?utm_medium=preview_link&utm_source=designer&utm_content=code-d142c6&preview=64fb469f933be7608520077399390b19&workflow=preview
Just the first “watch demo” button or the second as well?
Can you provide a link to published site please as well? Thanks.
Great question! I’d like for the first “watch demo” video to play to video above the fold.
For the second “watch demo” button, I have a pop up modal with the same embedded video. That one I do not need to start playing.
Here is the published site link: https://code-d142c6.webflow.io/
This is how I would select your video element
document.querySelector('#demo').querySelector('iframe').contentWindow.querySelector('#video-player-tag')
Unfortunately browser security blocks the attempt.
Uncaught DOMException: Blocked a frame with origin "https://code-d142c6.webflow.io" from accessing a cross-origin frame.
I’m not sure if streamable will allow us to manipulate the document contents of the iframe. Maybe someone else here knows a good way to get around that?
Ahh no fun. Thank you!
Is hosting the demo video on Webflow an option or does it need to be embedded from streamable?
Doesn’t necessarily need to be embedded through streamable. If I host it through webflow, would I just create different interactions for play button & “watch demo” video?
main reason behind embedding was for load time and my video is larger than the 30MB max webflow limit
OK.
Video was pretty short so I would think you could compress it below 30MB without too much quality loss.
Code would be something like this:
const demoButton = document.querySelector('.btn.demo')
demoButton.addEventListener('click', () => {
document.querySelector('#demo-video-id-here').play();
})
Some UX things to think about that your client may or may not care about…
Thank you! Only issue I’m running into now is that I’d like for the user to scroll forward or backward in the video. Is this something I’d be able to implement?
Try turning off the “include play/pause button” in background video settings of Webflow and add this line of custom code.
document.querySelector('video').controls = true
Also you are currently getting an error in console:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
You need to move this code into the “before closing body tag” section. It is trying to select the demoButton which doesn’t exist yet because the DOM has not fully loaded.
