Hero Blocks with Videos

Creating a hero block with a background video that plays in a continuous loop and includes a tinted overlay.

Learning Goals

At the end of this Tutorial, you will be able to:

  • Add a background video with a pre-loading still image to the hero block in a web page.

In this Tutorial, you will create a hero block with a background video and a tinted overlay. See below.

Hero block

About hero blocks with background videos

As Internet connection speeds grow faster and faster, hero blocks and other elements on web pages are increasingly using background videos. These are short videos of about 10 seconds that play in a continuous loop.

See the examples below.

The Yacht Company

MediaBoom

Not all users enjoy fast Internet connection speeds, however. So it is good practice to include a background image that displays until the video finishes downloading.

Here are some sources of free videos you can use as backgrounds:

Working with your sample files

In this Tutorial, you will update a copy of the sample web page and stylesheet you worked with in the previous Hero Blocks with Images Tutorial.

  1. In VS Code, open the hero-image.html web page and save it with the new name of hero-video.html.
  2. Open the hero-image.css stylesheet and save it with the new name of hero-video.css.
  3. In the new hero-video.html file, edit the name of the linked stylesheet from hero-image.css to hero-video.css, and save the web page.
  4. Replace the current title and description details with the following: 
    <title>Hero Block with Video</title>
<meta name="description" content="A hero block with a background video that plays in a continuous loop and includes a tinted overlay.">
  5. Finally, create a new sub-folder in your exercises/assets folder named videos and save the following image to it: Sample image hero-still.jpg

Downloading the background video

Your next action is to download a free-to-use video from the Pexels website.

  1. Click the link below to open a new web browser tab that offers a video for download. Girl Writing on Her Notebook
  2. At the top right of the screen, click the arrow at the right of the Free Download button. project in web browser
  4. For the video resolution, click the Original (1920 x 1080) option. project in web browser And then click the Free Download button.
  5. Copy the downloaded video to your websites/exercises/assets/videos sub-folder.
  6. As a final step, rename the video file from Pexels Videos 2086113.mp4 to hero-video.mp4. project in web browser

You are now ready to work with the downloaded and renamed video.

Adding the background video

Follow these steps to embed the video file in your web page.

  1. In VS Code, display the hero-video.html file.
  2. Replace the entire child <div> with a class of .hero-bg-media with the following. 
    <div class="hero-bg-media">
    <video loop playsinline muted autoplay poster="assets/videos/hero-still.jpg" class="background-video" disablepictureinpicture preload="auto"> 
        <source src="assets/videos/hero-video.mp4" type="video/mp4">
    </video>
</div>
    Your code for embedding the video file and poster image will now look as shown below. project in web browser
  3. In the <head> of the web page, change the name and location of the preload image from assets/img/business.jpg to assets/videos/hero-still.jpg.
  4. Change the text of the page to the following, and save the page. 
    <h1 class="slide-in-top">Education for Life</h1>
<h2 class="slide-in-left">A brighter career and future</h2>
  5. In the hero-video.css file, update the background-image style rule of the .bg-overlay selector as follows, and save the stylesheet. 
    background-image: linear-gradient(rgba(29,38,113,0.7),rgba(195,55,100,0.3));
    • The overlay colour changes from blue (RGB of 29,38,113) at the top to brown (RGB of 195,55,100) at the bottom.
    • The opacity of the overlay, represented by the letter A (for Alpha channel) decreases from 0.7 at the top to 0.3 at the bottom.

Updating the stylesheet for videos

In the hero-video.css file, you can see that the style rules set for a child element of the .hero-bg-media container apply only if that child is an image.

project in web browser

This needs to be updated as follows, so that the style rules apply to all child elements of .hero-bg-media, including both image and video files.

Replace the specific img selector with the wildcard * selector as shown below.

project in web browser

When finished, save the hero-video.css stylesheet.

All done.

Updating your website home page

Now that you have updated and styled a new web page, let’s add a hyperlink to it on the ‘home page’ of your web site. Follow the steps below:

  1. In VS Code, open this HTML file in your ‘main’ websites folder:   index.html
  2. Copy-and-paste the following new line to your web page at end of current list of web pages. 
    <p><a href="exercises/hero-video.html">Hero block with background video</a></p>

Save your index.html web page and view the result in your browser.

✅ That’s it. You have now successfully completed this Tutorial.

Adding a video and Google Fonts to your home page

Follow these steps to add a background video clip to your home page.

  1. In your index.html home page, under your <h1> and <h2> headings, create a <main> block with a single <section>.
  2. In the single <section>, place your <h3> small heading and the list of hyperlinks to your exercise files.
  3. Copy-and-paste the <header> HTML code from this Tutorial into your index.html home page to just after the opening <body> tag.
  4. In the pasted <header>, replace the <h1> and <h2> text with the text you want for your home page.
  5. Open your global.css stylesheet, and copy-and-paste into it the CSS from hero-video.css needed to style a background video.
  6. Also copy-and-paste from hero-video.css into global.css the styles needed to animate the <h1> and <h2> headings in your home page.
  7. In your 'main' assets folder, create a new sub-folder named videos and copy-and-paste into it the video and poster image from this Tutorial.
  8. In your global.css file, there are two media queries that set responsive padding values for the entire body of your home page. Edit these to set padding values only for the section tag in your home page.
  9. Save your work and verify that the hero block for your home page now looks similar to that in this Tutorial.
  10. Replace the provided sample video clip and poster image with another from the websites listed at the beginning of this Tutorial. For extra marks, create an original video clip with a poster image of your own.
  11. Whatever poster image you use, preload it in the <head> of your home page.
  12. Finally, replace the default font for your home page with two Google Fonts. Use one font for the <h1> and <h2> headings, and a second font for the <h3> small heading and hyperlinks to your exercises files. Check out this Top 50 Google Font Pairings website for ideas. Also, use the fluid font sizes based on custom properties for all the CSS font-size properties on your home page.

Working with video files for hero blocks

Before embedding a video file in a web page, here are two open-source apps to help you generate a poster image:

  • VLC Media Player (Windows, macOS): Open your video file and pause the video at the frame you want to use as your poster image. Go to Video | Take Snapshot in the menu (on Windows) or Playback | Video | Snapshot (on macOS). The snapshot will be saved in your default pictures folder. (You can configure this in VLC settings).
  • Shotcut (Windows, macOS): Open your video file and move the playhead to the frame you want. Go to File | Export Frame to save the current frame as an image.

The smaller the size of a video file, the faster it will load in a web page. Here are two open-source apps for compressing video files without significantly losing quality:

  • Handbrake (Windows, macOS): Open your video file and select Very Fast 480p30. Check the Web Optimized box to ensure the video streams efficiently. Adjust bitrate or quality settings if needed to further reduce the size. Click Start Encode to compress your video file.
  • FFmpeg (Windows, macOS): You can compress a video file by running a command like: 
       ffmpeg -i input-video.mp4 -vcodec libx264 -crf 28 output-video.mp4

    • Note: No background video clip should have a file size larger than about 20MB. About 10-12MB is best

Uploading your files to Github

You are now ready to upload your work to your account on Github.

  1. Open a new tab in your web browser and go to Github.com. If you are not already signed in to your Github account, sign in now. github-signin
  2. On your Github home page, click the ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on Github.   username.github.io github-signin
  3. On the next Github screen displayed, near the right of the screen, you can see a button named Add file. Click on it. github-upload-portfolio
  4. From the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  5. In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop your index.html file and your 📁 exercises sub-folder to upload them to your repository on Github. Introduction to HTML
  6. Scroll down to the bottom of the Github screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
  7. Finally, click the green Commit changes button to upload your files. Project Animation Google Fonts

Your updated home page and sample web page are now published on Github at web addresses similar to the following:

https://username.github.io/index.html
https://username.github.io/exercises/hero-video.html

It may take a few minutes for your uploaded files to appear on Github.