Video

The video elements play a video on your page. Use the Video element for a video file you upload to your project, or the Youtube, Vimeo, Dailymotion and Twitch elements for a video hosted on these platforms.

All five elements work the same way in workflows. They can start a workflow when the video plays, pauses or ends, and your workflows can play it, pause it or move it to a given time. Use them for a product tour on a landing page, a lesson in an online course, or a tutorial in your app.

Getting started

1. Add a video element to your page from Add Element. You'll find the five elements under Media. See which element to choose →
2. Choose your video file, or paste the link to your video. See how to add a video file →
3. Set how the video plays: autoplay, sound, loop and controls. See the playback settings →
4. Add workflows to react to the video or control it. See how to use workflows →

USING AI

You can also ask AI to add a video. Tell it where the video comes from and how it should play. For example: "Add the YouTube video https://www.youtube.com/watch?v=KenR4vRW_KA below the title, muted and in a loop".

Choose a video element

Element in Add Element	Plays	What you give it
Video	a video file uploaded to your project, or the link to a video file	File
Youtube	a YouTube video	Video url, for example https://www.youtube.com/watch?v=KenR4vRW_KA or https://youtu.be/KenR4vRW_KA
Vimeo	a Vimeo video, including unlisted videos	Video url, for example https://vimeo.com/123456789, or https://vimeo.com/123456789/abcdef1234 for an unlisted video
Dailymotion	a Dailymotion video	Video url, exactly in the form https://www.dailymotion.com/video/x84sh87, without anything after the video ID
Twitch	a Twitch video or a live channel	Video url, for example https://www.twitch.tv/videos/123456789 for a video, or https://www.twitch.tv/channelname for a channel

Each element only reads links from its own platform. To play a YouTube video, use the Youtube element, not Video.

Add a video file

The Video element plays a video file that you upload to your project:

1. Select the Video element and open its settings
2. Click on Choose Video next to File
3. In the Project files window, click on Upload new file and choose your video. You can upload .mp4, .avi, .flv, .3gp, .mkv, .mpeg, .ogg, .mov and .webm files. Just make sure the file size fits within the storage space of your pricing plan.
4. Click on the name of your file to use it
5. To show an image before the video starts, click on Choose image next to Preview image

You can also bind File to the link of a video file stored somewhere else, for example a file URL saved in one of your tables.

The video fills the whole element. Set the size of the element in the Style tab, for example a width and a 16:9 ratio, so the video has room to show.

Set how the video plays

These settings apply to the Video, Youtube and Vimeo elements. Dailymotion and Twitch have fewer of them: see the settings of each element.

• Start time (s): the second where the video starts. The Video element rounds it up to the next whole second
• Autoplay: starts the video as soon as the page loads. When you turn it on, Muted turns on too: browsers only start a video on their own when it has no sound
• Muted: starts the video without sound. Users can still turn the sound on with the controls
• Loop: starts the video again when it ends
• Controls: shows the play button, the time bar and the volume and full screen buttons. Turn it off if you build your own buttons with workflows
• Preload: Video element only. Lets the browser load the video before the user plays it

TEST IN PREVIEW

In the editor, the video doesn't start on its own and doesn't run its workflows, so you can work on your page without it playing. Switch to Preview to test Autoplay and your workflows.

Run a workflow when the video plays, pauses or ends

Each video element can start a workflow when the user plays, pauses or finishes the video. For example, show a sign-up form at the end of a product tour, or go to the next lesson when a course video ends.

1. Select the video element and open its Workflows tab
2. Click on New, then on Element triggers
3. Choose On play, On pause or On end
4. Add the actions of your workflow

With the Video, Youtube and Vimeo elements, the event sends the time where the video was when it played, paused or ended, in seconds. You'll find it in Event > value. The Dailymotion and Twitch elements send no data with their events.

Control the video from a workflow

Your workflows can play the video, pause it, or move it to a given time. For example, add buttons that jump to each chapter of a tutorial.

To make a Skip to features button that moves the video to its sixth second:

1. Select the button and add a workflow On click
2. Add the Execute component workflow action. You'll find it in Interface > Components
3. In Component, choose your video element, then choose Seek to
4. Type the time in seconds in Time, here 6

Seek to moves the video but doesn't play it. To play it from there, add a second Execute component workflow action with Play video.

The three actions available on every video element are:

• Play video: starts or resumes the video
• Pause video: pauses the video
• Seek to: moves the video to the time set in Time, in seconds

Learn more about the Execute component workflow action →

Show the state of the video

Each video element shares two variables that you can bind anywhere on your page:

• Is Playing: true while the video plays, false when it's paused or ended
• Current time: where the video is, in seconds

For example, bind the text of a button to Is Playing to show Pause while the video plays and Play when it's paused.

Example use cases

• Product tour: a muted video in a loop at the top of a landing page, with Autoplay on and Controls off
• Online course: a lesson video that goes to the next lesson On end
• Tutorial with chapters: one button per chapter, each with a Seek to action
• Custom player: Controls off, and your own play and pause buttons that use Play video, Pause video and Is Playing
• Live stream: a Twitch element set to a channel, to show a live event on your site

Best practices

Do:

• Keep Muted on when Autoplay is on, or the browser won't start the video
• Add a Preview image to the Video element, so the page looks finished before the video loads
• Compress your video files before you upload them: smaller files start faster
• Test your workflows and Autoplay in Preview

Don't:

• Paste a YouTube or Vimeo link in the Video element: use the element of the platform
• Turn off Controls without adding your own play and pause buttons
• Add extra parameters to a Dailymotion link

Forking

While the video elements offer the settings most pages need, there may be cases where you need functionality beyond what's natively available. In these situations, you can fork an element and modify it to meet your specific requirements.

If you are unsure how to fork an element, you can learn more in the dedicated documentation.

Forking example: playback speed

One reason to fork the Video element would be to let users change the playback speed. To do so, you could fork the element, then edit it with AI and pass in the following prompt:

Add a Playback speed setting with the options 0.5, 1, 1.5 and 2, and a Set speed action that changes the speed from a workflow

Properties reference

Settings

Video

Property	Options/Type	Description
File	video file	The video to play: a file uploaded to your project, or the link to a video file
Preview image	image	The image shown before the video starts
Start time (s)	number	The second where the video starts, rounded up to the next whole second. Default: 0
Autoplay	boolean	Starts the video when the page loads. Turning it on also turns on Muted. Default: off
Muted	boolean	Starts the video without sound. Default: off
Loop	boolean	Starts the video again when it ends. Default: off
Controls	boolean	Shows the controls of the player. Default: on
Preload	boolean	Lets the browser load the video before it plays. Default: on

Youtube

Property	Options/Type	Description
Video url	text	The link to the YouTube video, in the form https://www.youtube.com/watch?v=... or https://youtu.be/...
Start time (s)	number	The second where the video starts. Default: 0
Autoplay	boolean	Starts the video when the page loads. Turning it on also turns on Muted. Default: off
Muted	boolean	Starts the video without sound. Default: off
Loop	boolean	Starts the video again when it ends. Default: off
Controls	boolean	Shows the controls of the player

Vimeo

Property	Options/Type	Description
Video url	text	The link to the Vimeo video, in the form https://vimeo.com/123456789, or https://vimeo.com/123456789/abcdef1234 for an unlisted video
Start time (s)	number	The second where the video starts. Default: 0
Autoplay	boolean	Starts the video when the page loads. Turning it on also turns on Muted. Default: off
Muted	boolean	Starts the video without sound. Hidden when Autoplay is on. Default: off
Loop	boolean	Starts the video again when it ends. Default: off
Controls	boolean	Shows the controls of the player. Default: on

Dailymotion

Property	Options/Type	Description
Video url	text	The link to the Dailymotion video, exactly in the form https://www.dailymotion.com/video/x84sh87
Start time (s)	number	The second where the video starts. Default: 0
Muted	boolean	Starts the video without sound. Default: on
Loop	boolean	Plays the video again, or the recommended videos, depending on the player configuration of your Dailymotion account. Default: off

Twitch

Property	Options/Type	Description
Video url	text	The link to a Twitch video, https://www.twitch.tv/videos/..., or to a channel, https://www.twitch.tv/channelname
Start time	text	Where the video starts, in the form 0h0m0s, for example 1h2m30s
Autoplay	boolean	Starts the video when the page loads. Default: off
Muted	boolean	Starts the video without sound. Default: off

Styling

These elements don't have any styling props of their own. Set their size and position in the Style tab, like any other element.

Event triggers

Event	Description	Payload
On play	Triggered when the video starts or resumes	value: the time of the video, in seconds (Video, Youtube and Vimeo only)
On pause	Triggered when the video is paused	value: the time of the video, in seconds (Video, Youtube and Vimeo only)
On end	Triggered when the video reaches its end	value: the time of the video, in seconds (Video, Youtube and Vimeo only)

Example event payloads

On end

When a 12-second video ends:

{
  "value": 12
}

Exposed variables

Variable	Type	Description
Is Playing	boolean	true while the video plays
Current time	number	Where the video is, in seconds

Example variable values

Current time, six seconds into the video:

6.02

Component actions

Action	Description	Parameters
Play video	Starts or resumes the video	none
Pause video	Pauses the video	none
Seek to	Moves the video to a given time, without playing it	Time: the time in seconds

Frequently asked questions

Why doesn't my video start on its own?

In the editor, videos never start on their own: switch to Preview to test Autoplay. On your published app, make sure Muted is on. Browsers block videos that start on their own with sound.

Why don't my video workflows run?

The video elements only run their workflows in Preview and on your published app, not while you edit the page.

Why does my YouTube, Vimeo or Dailymotion video not show?

Check the format of the link in the table above. The Dailymotion element only accepts links in the form https://www.dailymotion.com/video/x84sh87: remove anything after the video ID.

Can I play a video stored outside of WeWeb?

Yes. Bind File of the Video element to the link of the video file, for example a .mp4 file stored in your table or on another service. For a video on YouTube, Vimeo, Dailymotion or Twitch, use the element of that platform.

CONTINUE LEARNING

The video actions use the Execute component workflow action. Learn how it works with other elements and with your own components.

Learn more about the Execute component workflow action →