> ## Content Index > Fetch the complete content index at: https://www.ectobuilder.com/llms.txt > Use this file to discover other available public pages before exploring further. # How to Make a Full-Screen Hero with a Video Background in Ghost - URL: https://www.ectobuilder.com/blog/ghost-full-screen-video-hero/ - Published: 2026-10-21T16:22:42.000Z - Updated: 2026-10-25T17:56:31.000Z - Description: Make your homepage hero fill the screen, add a looping video or gradient background with a shade for readable text, and keep it fast on phones. No code. - Author: Michal Wlosik - Tags: Guides, Design The first screen of your homepage does most of the work. A hero that fills the whole screen, with a looping video behind your headline, makes a strong first impression, and it's the look most landing pages and portfolio sites go for. Ghost themes rarely let you do this without editing code. This guide shows how to make a full-screen hero, add a video or gradient background, and keep it fast and readable. ![The Tugwatch homepage hero: a looping video of a woman reading on a sofa, who raises her hand to her hair and then checks her watch, behind the headline A gentle nudge before you pull](https://www.ectobuilder.com/content/images/2026/10/image-mvi9pfhi.gif) A video hero on [tugwatch.com](https://www.tugwatch.com/?ref=ectobuilder.com): the clip shows what the product does, right behind the headline. ## What you can set - **Height**: Auto (as tall as the content), S, M, L, or **Screen**, where the hero is exactly as tall as the screen below your header and the next section starts at the bottom edge. - **Content position**: put the headline at the top, middle or bottom of a tall hero. - **Background**: your color scheme, a solid color, a gradient at the angle you choose, or a **video**. - **Shade** for video: none, light or dark, so text stays readable over any footage. When the background is dark, the text turns light by itself. All of this works on any section, not just heroes. ## How to make a full-screen hero ### 1\. Select your hero Open your theme in [Ectobuilder](https://www.ectobuilder.com/) and click the hero at the top of your homepage. No hero yet? **Add section → Hero** has dozens. ### 2\. Set the height Under **Layout**, set **Height** to **Screen**. Then choose where the content sits. Middle is the classic look; bottom suits big photos and video. ### 3\. Add a video background Under **Style**, set **Background** to **Video** and paste a link to an MP4 file. It plays muted, on a loop, behind your content. Set **Shade** to **Dark** if the video is busy or bright, or **Light** for dark text over a bright clip, like the one above. ![The Ectobuilder editor with the hero selected; in the Style group on the right, Background is set to Video, with a video link and Shade set to Dark](https://www.ectobuilder.com/content/images/2026/10/image-mvo4pubg.webp) (1) Background: Video. (2) The video link and a dark shade. Height is under Layout. ### 4\. Deploy Deploy your theme to Ghost and open your homepage on a phone and a computer. [![CTA Image](https://www.ectobuilder.com/content/images/size/w256h256/2026/06/Ecto_builder_logo_sq_small.png)](https://editor.ectobuilder.com/login?mode=signup&plan=free&ref=ectobuilder.com) ****Give your Ghost homepage a strong first screen.** Full-screen heroes, video and gradient backgrounds, and a library of hero sections to start from. [Try it free ](https://editor.ectobuilder.com/login?mode=signup&plan=free&ref=ectobuilder.com) ## Where to host the video The background needs a direct link to an MP4 file, not a YouTube or Vimeo page. Two easy options: - **Your Ghost site.** In any Ghost post, add a **Video** card and upload the clip, then copy the video's address (it ends in `.mp4` and lives under `/content/media/`). You can delete the post afterwards; the file stays. - **A file host or CDN**, like Bunny, Cloudflare R2 or your own server, if you already use one. ## Tips for a fast, readable video hero - **Keep it short and small.** 10 to 20 seconds that loop smoothly, under 5 MB, at 1280 or 1920 pixels wide. Remove the sound track; it never plays anyway. - **Calm footage works best.** Slow movement behind text reads better than fast cuts. - **Keep the action away from the text.** Like the Tugwatch clip, frame the movement on the side opposite your headline. - **Use the shade.** Text over a busy video is hard to read. A shade fixes it without editing the video. - **Check on phones.** Phones play muted background video, but a full-screen hero is tall there: keep the headline short so it fits. - **Not sure about video?** A gradient background in your brand colors gives a similar effect at no cost to speed. ## Related guides - [Core Web Vitals for Ghost](https://www.ectobuilder.com/blog/ghost-core-web-vitals/): what makes a Ghost theme fast. - [Landing pages with custom templates](https://www.ectobuilder.com/blog/ghost-landing-page-custom-template/): a page with its own design, picked per page in Ghost. - [Custom fonts in Ghost](https://www.ectobuilder.com/blog/ghost-custom-fonts/): pick a font or upload your own files. - [How to build your Ghost theme visually](https://www.ectobuilder.com/blog/build-ghost-theme-visually/): every step, from picking a theme to publishing it to Ghost. ## FAQ #### Can I use a YouTube or Vimeo video as the background? Not as a background: it needs a direct link to an MP4 file. For a YouTube or Vimeo video readers can play, use a video section instead. #### Does a full-screen hero work on phones? Yes. It uses the screen’s real height, so the phone’s address bar doesn’t cut it off, and taller content still makes the section grow. #### Will a video background slow my site down? A short, compressed clip adds little, and it loads alongside the page rather than before it. Keep it under 5 MB, or use a gradient instead. #### Can I use these settings on other sections? Yes. Height, content position and backgrounds work on any section, like a call to action or a quote. [![CTA Image](https://www.ectobuilder.com/content/images/size/w256h256/2026/06/Ecto_builder_logo_sq_small.png)](https://editor.ectobuilder.com/login?mode=signup&plan=free&ref=ectobuilder.com) ****Design your Ghost homepage visually.** Start from a hero you like, make it full-screen, add video, and deploy straight to Ghost. [Start building ](https://editor.ectobuilder.com/login?mode=signup&plan=free&ref=ectobuilder.com)