SectionAI is free + 20K tokens if you're a The4 customer, Free plan is available Install App  

Header background

Video

Eira

Written by Eira

Last updated

19 views

On this page


Versatile "Video" Section: Enables embedding videos from various sources (YouTube, Vimeo, direct uploads). Supports customization of playback options (autoplay, loop, mute), display of controls, and the addition of a custom poster image. Easily adjust the video aspect ratio and size to fit the page layout.

video 2.png

1. How to access the Video section?

Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.

Scroolingtext01.png

Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select the Video.

video 1.png

2. How to customize the Video section?

After adding the Video section, you can customize its settings using the sidebar—located on the right or left side of your screen depending on your device.

  • Video: Upload a direct video file to play within this section. Note: If you also provide an external video link, this uploaded video will take precedence.

    Replaces external video if both are set.

  • External link video: Enter the embed link of the video from platforms like YouTube or Vimeo to embed it in this section. This is a convenient way to use videos already hosted online.

  • Video ratio (Adapt video, 4:3, 16:9, 21:9): Choose the desired aspect ratio for the video display. The "Adapt video" option will attempt to maintain the video's original aspect ratio. Other options allow you to set a fixed ratio to fit the layout.

  • Color: Choose the background color for the video container when the video is loading or does not fully occupy the space.

  • Full width: Enable this option to make the video span the entire horizontal width of its immediate container. This is commonly used for creating full-width background videos or introductory videos.

video 3.png

Section padding

  • Top padding: This option allows you to set the amount of space (padding) at the top of the slider section. You can drag the slider or directly enter a numerical value to adjust this spacing

  • Bottom padding: This option allows you to set the amount of space (padding) at the bottom of the slider section. You can drag the slider or directly enter a numerical value to adjust this spacing

  • Rate padding (mobile): This option allows you to set the aspect ratio-based padding for mobile view (in percentage). For example, 75% means the height will be 75% of the width.

section padding.png

Custom CSS

Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.

Add custom styles to this section only.

To add custom styles to your entire online store, go to theme settings.

custom CSS.png

🎁 Exclusive Deals for The4 Customers

SectionAI

🤖 SectionAI – Build Sections with AI

Generate Shopify sections from text or wireframes.
The4 users get +20,000 bonus tokens when verifying their theme license.

  • ✅ No-code section builder
  • ✅ Works with your The4 theme
  • ✅ Build FAQs, banners, product grids & more
🚀 Try Free – Claim Tokens
EComposer

🎉 EComposer – Free 6-Month Plan

Build landing pages, sales funnels, and more with drag & drop.
The4 users get 6 months free (save $114).

  • ✅ 100+ templates ready to use
  • ✅ Build any Shopify page
  • ✅ No coding required
🔓 Get 6 Months Free

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.