LogoLogo
Quest HomeSign Up
  • 😀Welcome to Quest
  • Getting Started
    • Quest Overview
    • Helpful Resources
    • Quick Start - Build your first component from Figma
    • Quick Start - Build your first component from a Wireframe
    • AI Prompt
  • Fundamentals
    • Customizing & Using the UI Kit
    • Designing Custom Components in Figma
    • Easily Sync Designs without Losing Work
    • Setting Up Props & Bindings
    • Exporting Code
    • Push to your Repository
    • Creating Responsive Components
    • Nesting Components
    • Workspaces & Apps
    • Code & Preview Mode
    • Prototypes/Wireframes
    • Animations - build with React Spring
    • Quest plugin for Figma Dev Mode
    • Publish on Quest to a URL
  • Features
    • Working with Variants & States
    • Naming Conventions
    • Previewing with Custom Fonts
    • Light & Dark Mode
    • Creating a custom Tooltip
    • Creating a Floating Popover
    • Creating a Dialog pop-up
    • Radio Group
    • Using the MUI Data Grid & Table
    • Data & List Bindings
    • Dynamic Bindings
    • Grid
    • File Upload
    • Design System Tab and Theme Import
    • How-to use a Theme in your Application
    • Accessibility Support
    • Design Tips and Tricks
    • Video
    • Lazy Loading
    • Sticky Position
    • Link
    • Custom Breakpoints
    • Min / Max Width
    • Supported Quest UI Kit Components & How-to Make Edits in Figma
    • Supported Chakra Components & How-to Make Edits in Figma
  • Advanced Tutorials
    • Setting up Bindings and Features on the MUI Button
    • Display Repeating Components based on a Dynamic List
    • How-to Pass Values from Parent to Nested Components
    • How-to Invoke a modal Dialog Box from a Button Click
    • How to Setup a popover
  • 🔍Help
    • Product Updates
    • FAQs
    • Plugin Warnings / Alerts
  • 💡Support
    • Why does my design look different in Quest than Figma?
    • Can I keep making changes in Figma without affecting code?
    • What are some best practices?
    • Does Quest support more than Figma and React?
    • How do I manage users?
    • What is the refund process?
    • How do I get in touch with Quest?
    • Do I have to use MUI if I'm using Quest?
Powered by GitBook
On this page
  • Feature options
  • Viewing your video

Was this helpful?

  1. Features

Video

PreviousDesign Tips and TricksNextLazy Loading

Last updated 2 years ago

Was this helpful?

Quest currently supports both Youtube and Vimeo URLs to play in place of a placeholder image. You can replace any container with a video but you cannot replace text or images so be aware of that when setting up placeholders for video in your design. The best example of this would be to use a background image on a frame as the placeholder.

There are 2 types of video options here. You can either use a frame as a placeholder with no children or you can use a frame with children inside of it to see them appear above the video and to treat it as a video background.

When copying and pasting the URL from both Vimeo and Youtube, be sure to copy and paste it from the top of the browser for the video you want to use. Do not use the share links as they may not work.

Feature options

There are 5 checkbox options to choose from.

Autoplay

This option will play the video as soon as your page loads no matter where it is on the page. This is mostly helpful for background videos as it can be annoying to users to have videos autoplay with sound somewhere down the page they haven’t see yet.

Autoplay will not generally work unless you also have your video set to Muted as majority of browsers will block Autoplay with sound as not to disrupt users.

Loop

This option will simply restart the video from the beginning once it reaches the end. Otherwise it will stop at the final frame.

Controls

This option is to show or hide the controls for the video. Do you want people to be able to pause or scrub through the video or do you want it to play in the background and not have controls show up when they hover over it?

Vimeo controls depend on the type of account the video originates with. If the video originates with a paid account, then controls will be hidden if you choose to. If it comes from a free account, controls cannot be hidden by this checkbox.

Hiding controls in Youtube will remove the finetune controls but will not full remove the large play/pause button and you may also see some Youtube branding as well.

Muted

This option allows you to turn off all sound in your video.

Plays Inline

This option lets you play inline or let browser do a lightbox treatment (browser behavior might vary by browser and device type - mobile or desktop)

Viewing your video

You will notice that the placeholder you have in your design does not immediately change to the video. You can only view the video if you are in Preview mode or when running your App in localhost.