Skip to main content

Video

Bring movement to your project with video

Jørgen Wigum Lurvik avatar
Written by Jørgen Wigum Lurvik
Updated over 2 weeks ago

Videos can help make your website more dynamic and engaging. You can use them for backgrounds, storytelling, or interactive content.

Upload a Video File

  1. Go to the left panel and click the video icon

  2. Click Upload Video and choose your file

  3. Hover over the uploaded video and click Select

  4. Drag the video onto your canvas

Add a Video from the Add Menu

  1. Press M or click the Add menu

  2. Search for and select the Video component

  3. Drag it to the canvas

  4. Double-click it to open settings

  5. Click Select Video, then upload your file


Add a Video from a URL

  1. Click the video icon in the left panel

  2. Click Add URL

  3. Enter a name and paste the video link
    (Supports: .mp4, .ogg, .webm)
    For YouTube or Vimeo, use their specific components

  4. Click Save

  5. Hover over your video and click Select, then drag it to the canvas

Note: You can use videos with transparent backgrounds using this method. If you want to integrate your video from a third-party source, please read this article.

Configuration options

  • Select Video – Choose a file or URL

  • Mute – Turn sound off by default

  • Controls – Show or hide playback controls

  • Autoplay – Play video when it comes into view

  • Loop – Repeat the video continuously

  • Fill – Make video stretch to fill the container

  • Disable Tracking – Prevent tracking events

  • Preload – Choose how much of the video loads upfront (Auto, Metadata, None)

  • Thumbnail – Add a preview image (especially useful on mobile)

Custom interactions

The Video component has custom interactions for a more immersive experience. Below are the unique triggers and actions for the Video component.

You can trigger actions based on how users interact with the video.

Triggers:

  • On play

  • On pause

  • On end

  • On play time (at a specific time in the video)

Actions:

  • Play

  • Pause

  • Restart

  • Toggle play

  • Mute

  • Unmute

  • Toggle sound

Note: If the interaction options don’t appear, try deleting and re-adding the Video component from the Add menu.

FAQs

Q. How do Videos impact my page performance?

  • Vev generates a maximum of 12 frames per second of video, up to a maximum number of 300 frames, to help improve page speed and performance. Additionally, it's recommended to use videos with a resolution of 720p, as higher resolutions will be automatically reduced to 720p. For HD-quality videos, you should use a third-party service like Vimeo, YouTube, JWPlayer, or your own self-hosted solution.

Q. What's the maximum supported video size?

  • The limit for a Vev-hosted video is 1 GB. Make sure your video doesn't exceed this size.

Q. Why is my video still encoding?

  • Your video may still be encoded due to various factors such as the size of the video, the format, and the server load at the time of encoding. Encoding is a process where the video is converted into a format suitable for streaming and playback on different devices. It may take some time depending on the complexity of the video and the resources available for encoding. Please be patient and allow the encoding process to complete. If the issue persists, consider reaching out to customer support for further assistance.

Q. Why aren't my videos playing (with sound) when the website loads?

  • Modern browsers, like Safari and Chrome, don't allow videos to play with sound unless the user has interacted with the website first. Just double-click the video and toggle the Mute option. This will fix the issue and allow the video to play automatically when your website loads.

    This change in autoplay policies aims to improve user control over media playback, discourage ad blockers, and reduce data usage, particularly on limited networks. For more information, you can refer to Chrome's blog post on their 'Autoplay policy in Chrome'.

Q. What are the supported file types I can upload?

  • You can upload .mov, .mp4, and .wav files.

Q. Why is my background video not playing on mobile devices?

  • On iOS devices, when they are in low-power mode, it will not allow videos in Safari to autoplay without the user’s input. This impacts background videos, and Safari displays the play button icon.

Did this answer your question?