Hero Blocks with Videos

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.

With Grace and Gold

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:

• Pexels
• Videezy
• Pixabay
• Mixkit
• Coverr
• Videvo

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: hero-still.jpg

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 hero-bg-media block with the following.

   <div class="hero-bg-media">
     <video loop muted autoplay poster="assets/videos/hero-still.jpg" class="background-video">  
     <source src="assets/videos/hero-video.mp4" type="video/mp4">
     </video>
   </div>
   

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.

Playing a background video on Apple iPhones and iPads

To get your background video to play on Apple mobile and tablet devices, you will need to add a few more attributes to the opening video tag in the hero block of your web page.

Without these extra attributes, your opening video tag looks like this:

<video loop muted autoplay poster="assets/videos/hero-still.jpg" class="background-video">   

For Apple devices, you will need to add some new attributes as follows:

<video loop playsinline muted autoplay poster="assets/videos/hero-still.jpg" class="background-video" disablepictureinpicture preload="auto">  

As you can see, the new attributes of the opening video tag are: playsinline, disablepictureinpicture and preload="auto".

You can copy-and-paste the above into your hero-video.html web page, to replace the code already there.

Your code for embedding the video file and poster image will now look as shown below.

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.