Video Actions 🧪
Goals
Work with all video types
HTML Embed
<video>
elementWebflow Video element ( aka. Embedly )
Webflow YouTube element
Webflow Background Video element
HTML Embed Vidzflow video
Auto-Detect the Video type
Support Wrapper-based attributes so that the video type can be changed later with no change to the SA5 Events implementation
Wistia?
Mobile tests-
<iframe src="your-video-url" playsinline></iframe>
Technical Notes
User Interaction Requirements
let userInteracted = false;
document.addEventListener("click", () => userInteracted = true);
document.addEventListener("keydown", () => userInteracted = true);
document.addEventListener("touchstart", () => userInteracted = true);
// Check later
if (userInteracted) {
console.log("User has interacted.");
}
const testVideo = document.createElement("video");
testVideo.muted = true;
testVideo.play().then(() => {
console.log("Autoplay is allowed. User may have interacted.");
}).catch(() => {
console.log("Autoplay is blocked. No interaction yet.");
});
if (navigator.userActivation?.isActive) {
player.unmute();
player.play();
} else {
player.mute();
player.play();
}
Embed.ly
https://www.npmjs.com/package/player.js
Vimeo
https://github.com/vimeo/player.js
Usage Notes
Play Video
sa-action-video-play
= ( event name )
sa-action-video-play
= ( event name ) Will begin playing the current video when this event is fired.
Pause Video
sa-action-video-pause
= ( event name )
Seek Video
sa-action-video-seek
= ( event name )
sa-action-video-seek
= ( event name ) Seeks the current video when this event is fired.
Restart would be Seek 0.
Mute Video
Unmute Video
Pauses the current video when this event is fired.
sa-action-video-restart
sa-action-video-seek:pos = ( position to seek )
Position to seek
Defaults to 0 ( beginning of video )
Can be;
Numeric - specifies seconds from start e.g. 10
Percentage - e.g. 80%
sa-action-video-toggle
sa-action-video-mute
sa-action-video-unmute
Technical Notes
Wrapped video element
Convenient for swapping out video type later
HTML embedded
div.w-embed
video
Custom element
video
div.w-embed-youtubevideo
YouTube Video
div.w-embed-youtubevideo
> iframe
General Video
div.w-video.w-embed
> iframe.embedly-embed
Background Video
div.w-background-video.w-background-video-atom
> video =
Vidzflow
div[data-video-id]
iframe[src https://app.vidzflow.com/ ]
Future
Autoplay
Muted
Loop
Click to play
Start playing when in view
Play inline
Overlay
Used as a background video
Play from start when fullscreen
CTA
Last updated
Was this helpful?