Foxify - Smart page builder
Try Foxify freeResourcesOther solutions
  • About Foxify
    • What is Foxify?
    • Account & Billing
      • Free trial
      • Pricing plans
      • Use discount code
      • Change your plan
      • Uninstall Foxify
    • Changelog
    • Terms & Policies
  • Getting started
    • How to install Foxify
    • Quick start guide
    • Analytics
    • App extensions
      • Age Verifier
      • Ajax Add to Cart
      • Countdown Timer
      • Inventory status
      • Product Options Swatches
      • Quick View
      • Recently Viewed Products
      • Storefront Filters
    • Global styles
    • Pages list
      • Create a Home page
      • Create a Product page
      • Create a Collection page
      • Create a Landing page
      • Create a Blog post
      • Templates
      • Save a page as a template
    • Import & Export pages
    • Translation
  • FoxStudio 🔥
    • What is FoxStudio
    • FoxStudio editor
    • FoxStudio tools
      • Autosave
      • Grids guide and Snap lines
      • Pan & Zoom mode
      • Inspector panel
      • Layers
      • Layout template 🧩
      • AI responsive ✨
      • Prettify
      • Keyboard shortcuts
      • Undo & Redo
      • SEO checker
    • Working with Pages
      • Page settings
      • Edit a Section
      • Add a Section
      • Animations
      • Save and re-use Assets
    • Working with Elements
      • Add and Edit Elements
        • Text
        • Button
        • Image
        • Video
        • Countdown timer
        • Marquee text
        • Newsletter form
        • Contact form
        • List items
        • Slideshows
        • Tabs
        • Collapsible content
        • Testimonials
        • Navigation
      • Cells and grids
      • Constraints
      • Frame Elements
      • Resize an Element
      • Stack Elements
      • Copy & Paste Elements
    • FoxTransfer - Clone web design to Foxify
  • 🔥Figma to Shopify with Foxify
  • Basic editor
    • Page Editor
      • General settings
      • Styles settings
    • Sections & Presets
      • Before/ After slider
      • Blog posts
      • Collapsible content
      • Buy Now button
      • Collection list
      • Collection tabs
      • Countdown timer
      • Custom section
      • Favorite products
      • Featured product
      • Featured collection
      • Google Map
      • Handpicked products
      • Image banner
      • Image cards
      • Image with text
      • Lookbook
      • Multicolumn
      • Product tabs
      • Scrolling promotion
      • Slideshow
      • Tabs
      • Testimonials
    • Foxify layout
      • Menus
      • Link menus to Foxify layout
    • Advanced features
      • Custom code
      • Check SEO score
      • Keyboard shortcuts
      • Page revisions
      • Undo & Redo
  • Section design
    • Create a Theme Section
  • AI-powered fox magic
    • What is Fox Magic? ✨
    • All about credit
  • Build for Success series
    • FAQ page like Satyajewelry
    • Featured collections showcase like Puma
    • Home page 🔥
    • Landing page 🔥
    • Multi-column section like SkinnyTeatox
    • Newsletter section like Emmabridgewater
    • Product page 🔥
    • Scrolling promotion like Elementmatcha
    • Testimonial section
    • Video hero section like Swarovski
  • FAQ
    • Foxify Free plan is sunsetting
    • Foxify Gen 2 Beta Test
    • How to report an issue
    • Generic
      • Compare Foxify with other Shopify page builders
      • Completely remove Foxify code from my Shopify theme
      • How to change the app language 🌍
      • Pick a theme to work with Foxify
      • Does Foxify work for all the pages in my store?
      • How to get API Secret key in Foxify
      • How to join Foxify giveaway 2022
    • Edit your pages
      • Add custom font
      • Add custom icon
      • Change my page title and URL
      • Change the product prices' color
      • Create an anchor link
      • Create a parallax background
      • How to make rounded buttons
      • Set a page as Home page
      • Schedule your page to publish at a future date
      • Should I use Pixel, Rem, or Em?
      • Change the page background
  • Troubleshooting
    • Liquid error: Could not find asset snippets
    • Published page is not visible on live store
    • Compare-at prices do not show in live store
  • Shopify Apps Integrations
    • Air Product Reviews
    • DingDoong: Delivery + PickUp
    • Loox Product Reviews
    • LAI Product AliExpress Reviews
    • Wide Bundles - Quantity Breaks
    • Ai Loyalty, Email, Review, SMS 🔥
    • FoxKit AIO Upsell Cross-sell 🔥
    • Yotpo ‑ Product Reviews
    • Judge.me Product Reviews
    • BON Loyalty Program & Rewards
    • Kaching Bundles Quantity Break
Powered by GitBook
On this page
  • How to add an video
  • How to edit a video
  • Add a video
  • Video settings
  • FAQ
  • Why is my video not playing on my live site?

Was this helpful?

  1. FoxStudio 🔥
  2. Working with Elements
  3. Add and Edit Elements

Video

PreviousImageNextCountdown timer

Last updated 4 months ago

Was this helpful?

Videos are a powerful way to engage your audience and enhance your website. FoxStudio makes it simple to add and customize videos to match your design needs. Follow the steps below to add and edit videos effectively.

How to add an video

Steps:

  1. Select Media > Videos or in Quick add, select Video element.

  2. Drag the video onto your canvas.

How to edit a video

Once you've added the image, you can customize it to match your design.

Steps:

  1. Select the relevant video element in the editor.

  2. Use the tools bar above the selected video element to quickly edit it.

All the formatting tools below can be found in the right-handsided Inspector panel.

Add a video

Insert your video link or select one from your Shopify Files.

Vimeo, Youtube or MP4 links are supported.

  • Use high-quality videos: Ensure videos are clear and visually appealing for a better user experience.

  • Optimize for load times: Compress large video files to avoid slow page loading.

Video settings

  • Cover image: Add a cover image that displays before the video starts playing.

    • Click Select Image to upload or choose a custom thumbnail.

  • Playback options:

    • Muted: Enable this option to mute the video by default.

    • Autoplay: The video can be set to automatically play if they're muted.

    • Loop: Choose this option to play the video on a continuous loop.

    • Controls: Enable or disable playback controls for the video (e.g., play/pause, volume). (this setting is applied for Shopify-hosted videos).

You can play a video automatically as it enters the viewport by enabling the options Muted, Autoplay, and Lazy load.

Browsers will block any video from auto-playing if it is not muted, so ensure your videos are set to mute.

  • Video ratio: Choose the aspect ratio for your video display:

    • 16:9 (default widescreen)

    • 4:3 (traditional screen)

    • 1:1 (square)

    • 21:9 (cinematic)

    • 9:16 (vertical for mobile).

FAQ

Why is my video not playing on my live site?

If you or your visitors notice that videos or elements with motion (like animation effects or marquee text) aren’t playing on your live site, this could be due to the Reduced Motion feature enabled on some devices.

What is reduced motion?

Reduced Motion is an accessibility feature designed to enhance the browsing experience for individuals with disabilities or impairments by disabling motion effects like animations and videos. It’s built into various operating systems to provide a more accessible user experience.

How to disable reduced motion?

Follow the steps for your specific device or operating system:

  • Android: Settings > Accessibility > Remove Animations

Note: On some devices, Reduced Motion may be automatically enabled when in low battery or power-saving mode. Disabling these modes can also help restore video playback functionality.

In the FoxStudio editor, on the left Sidebar > Click Add elements (), or press E.

Pro tips :

: Settings > Accessibility > Motion

: Settings > Accessibility > Display

: Settings > Ease of Access > Display > Show animations

⭐
iPhone and iPad
Mac OS
Windows OS