Video Actions 🧪

Goals

• Work with all video types

  • HTML Embed <video> element

  • Webflow 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 )

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 )

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%

Can be placed on the action element, directly on the the video, OR it can be placed

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