Page Content Sections - Hero Video Section
Use the Hero Video Section when you want to embed a YouTube or Vimeo video in a wide hero-style area on a page.
What this section is for
This section places a video directly on the page in a 16:9 video area.
It works well for:
- welcome messages
- event highlight videos
- promotional videos
- tutorial or orientation videos
Helpful details:
- On landing pages, the video can span the full browser width.
- On default pages, the video uses the full width of the main content column.
- This section does not include its own headline, caption, button, or text field.
- Videos are embedded from YouTube or Vimeo. They are not uploaded into Clubistry.
Fields in the Hero Video Section
Section Title
Use Section Title to help your team identify the section while editing the page.
Helpful detail:
- This title is internal only. It is not shown on the website.
Background Color
Use Background Color to choose the section's color styling.
Helpful details:
- This uses the same color selector system used in other page sections.
- The color is most noticeable when Inset Video on Background is turned on.
Inset Video on Background
Use Inset Video on Background when you want the video to sit inside a padded section instead of stretching edge to edge within the section area.
Helpful details:
- If this is turned on, the video sits inside visible background space.
- If this is turned off, the video fills the section width without a visible frame around it.
YouTube Video ID
Use YouTube Video ID when the video is hosted on YouTube.
Helpful details:
- Enter only the video ID, not the full URL.
- For a standard YouTube link, use the part after
v=. - For a shortened YouTube link, use the part after
youtu.be/.
Vimeo Video ID
Use Vimeo Video ID when the video is hosted on Vimeo.
Helpful detail:
- Enter only the numeric video ID, not the full Vimeo URL.
Active
Use Active to control whether this section is included when the page is rendered.
Helpful detail:
- If Active is turned off, the section stays in the page editor but does not appear on the website.
Important behavior to know
- If both video fields are filled in, the website uses the YouTube ID first.
- If neither video field is filled in, the section can still render an empty 16:9 video area.
- The video player controls and playback behavior come from YouTube or Vimeo.
- This section does not upload or host a video file for you.
- The page's own permissions still control who can reach the page.
- If you need a heading or explanation above the video, add a Simple Text Section nearby.
How to add a Hero Video Section to a page
- Open the page you want to edit.
- Go to the Page Content area.
- Click Add new section.
- Choose Hero Video Section.
- Enter a Section Title for internal reference.
- Choose a Background Color if needed.
- Turn on Inset Video on Background if you want visible space around the video.
- Enter either a YouTube Video ID or a Vimeo Video ID.
- Make sure Active is turned on.
- Save the page.
- Review the page on the website.
Practical setup tips
- Use only one video platform field per section.
- Test the video on the website after saving.
- Make sure the video allows embedding on external websites.
- Use captions or subtitles when available.
- Add surrounding text in a Simple Text Section if the video needs context.
- Use the inset option when you want the section background color to be visible.
If the section is not behaving as expected
Check these items first:
- the page was saved after your edits
- the section's Active toggle is turned on
- the correct video ID was entered instead of the full URL
- only one video field is being used
- the video still exists and allows embedding
- you are not expecting Clubistry to host a local video file
Related topics
- Pages - Learn how pages and page sections are managed.
- Page Content Sections - Hero Image Section - Use this when you want a visual image instead of a video.
- Page Content Sections - Simple Text Section - Add a heading, instructions, or context before or after the video.