Hero · video block

What is the Hero · video block for?

Use motion only when it communicates more than a still image could. The Hero · video block can quickly show a place, process, atmosphere or product in use. The main message still needs to make sense without the video: the background is a muted visual layer, not a full video player.

A good starting point: a short, calm, naturally looping scene; a clear poster image; a medium overlay; a concise headline; and one specific CTA.

What makes a good background video?

A strong hero video does not tell a whole film. It adds useful information within a few seconds.

One simple scene

Show one place, movement, process or product use. Fast cuts and too many scenes compete with the headline.

Short and loopable

Choose a moment that can restart naturally and communicates the idea within a few seconds.

Visual quiet behind the copy

Keep the headline area relatively calm. The motion should stay in the background while the message and CTA remain primary.

Short — inner page

Add movement to the opening without taking over the whole screen.

The short version can be a quick visual introduction to a service, place or process.

See the details

Tall — homepage hero

Show the experience before you explain it at length.

The tall version works well when motion is an important part of the first impression but should not fill the visitor's entire screen.

Take a look All blocks

Fullscreen — immersive opening

Give a big experience room to breathe — but only when the motion earns it.

Fullscreen works when the place, process or visual experience is itself an important part of the offer. The content also uses full width, with safe side padding.

Explore

Important: the background video is muted. Do not rely on narration, speech or sound effects. The main message should remain complete with the poster image and without video. On this page, the Tall example uses real motion from a YouTube video; the other two demonstrate the layouts with poster images only. On your own site, add the video in the Video URL (MP4 or YouTube) field and, when available, provide a WebM version too.

Setting	What does it control?	Practical guidance
Video source	Video URL (MP4 or YouTube), plus an optional WebM version.	Provide at least one browser-playable video source. WebM can serve as an alternative source.
Poster image	Poster / fallback image.	Always provide a strong still image. It appears before the video loads, can replace it in constrained situations and should carry the visual message on its own.
Height	Short / Tall / Fullscreen.	Tall is a solid homepage default; Short suits inner pages; Fullscreen only when motion is genuinely part of the experience.
Overlay	Light / medium / dark.	Choose for text readability. Contrast matters even more on moving backgrounds than on still images.
Heading level	H1, H2 or H3 for the headline.	Keep one H1 per page. Use H1 when this hero is the main page heading; use H2 when a Title block already appears above it or when this is not the first hero.
Headline and description size	Headline size (px) and description size (px), or Auto.	Leaving them empty keeps the default size, which is usually enough. Large sizes scale down on narrow screens so the text still fits.
CTA and colours	Button label, destination, button colours and text colours.	Make sure the CTA stays readable over both light and dark frames of the video.
Width and spacing	Section width, content width and inner spacing.	Full-width backgrounds are natural here. Keep content Wide or Full, and add safe side padding when the content itself runs full width.
Visibility	Device-specific and scheduled visibility.	Scheduling can be useful for campaigns. Do not use Mobile only or Desktop only visibility as a workaround for a poorly behaving responsive video.

Key settings for the Hero · video block

Second CTA: button or text link

You can add a quieter secondary action beside the primary button — for example, “See how it works” next to “Get started”. Set its destination in the block's Secondary link field, then enter the label directly in the hero beside the main button. The second action appears only when both a label and a link are present.

Secondary action style: Text link is the default and competes less with the primary CTA; Button gives it more weight. As a button, it can have its own background and text colours.
Buttons: choose Side by side — where the second action wraps to a new line if needed — or One under the other.

Over video or a poster image, the text-link version follows the surrounding text colour so it remains legible with the overlay. On moving backgrounds, a text link can disappear visually, so the button style may be safer.

Tip: the two actions should not carry equal weight. If the second is also a button, keep it quieter so the main next step stays obvious.

An image as the second CTA

The third option under Secondary action style is Image: the second step is then a picture that works as a link. A typical example is a funding badge, such as the Széchenyi Plan Plus or an EU funding notice, linking to the project page.

Image frame: White card, so the official artwork keeps its own white background on any band, or No frame.
The ALT text is the link’s name, so describe where it leads, not the picture, for example: “Széchenyi Plan Plus – project page”. Until it has ALT text, the image link is left off the page.
Set the destination in the Secondary link field, just as for a button or a text link.

Upload the official badge from the file you received with your grant.

Hero · split: heading, a “Get a quote” button and a funding badge on a white card as the second CTA, a photo on the right. — An image as the second CTA on a Hero · split block: the badge on a white card next to the primary button (sample image, not a real logo).

How to make a useful video-background hero

Short is better for background video. Choose a clip that makes sense within a few seconds and can loop naturally. Do not put your full company film behind the hero.
Do not build important content around sound here. The background video is muted, so everything essential should also appear in the headline, supporting copy and the rest of the page.
The poster is the visual fallback. Choose an image that works as a hero background in its own right, not just a random video frame.
A video can contain both bright and dark frames, so do not judge only one moment. Check that the headline remains readable throughout; if not, use a stronger overlay or a calmer video.
Check that the copy does not sit over the busiest part of the frame, the poster still works on a smaller screen and the hero does not become disproportionately tall. The main message should remain complete without the video.
Avoid it when the motion is only decorative, demands too much attention, the content makes no sense without sound, or one strong photo communicates the same message more clearly and calmly.

When is another hero better?

Not every visually strong opening needs motion.

Hero · full image →

Use it when one strong photograph already creates the atmosphere. It is simpler, faster and calmer.

Hero · split →

Use it when a product, person or result should appear as a distinct image beside the copy.

Hero · centred →

Use it when the message itself is the strongest asset and motion would only distract from it.

MAKE MOTION A TOOL, NOT DECORATION

A good video background adds something within seconds that a still image cannot.

Keep it short, muted and loopable, provide a strong poster image, and leave visual quiet around the headline.

Build my website →Back to Website Blocks