Unit13 Hero Video

Overview

The purpose of this assignment is to replace the responsive slider on the home page with a looping video.

Tools

• Adobe Premiere
• HandBrake

Objectives

At the end of this module, you should be able to...

• Download stock videos related to your site topic
• Edit them into a short looping video
• Compress two versions (mp4 and webm)
• Remove the default page title with a plugin

Tasks

• Download stock videos from Vecteezy or Pixabay or any any other source
• Review module 8 from Principles of Web Languages

Watch

• Kultra
• 4610 13a- Hero Video Overview
• 4610 13b- View Width for Font Size

Reflection Questions

After reading the following article, write me a short 1-2 paragraph summary and submit it in Canvas.

• Please submit a 1-2 paragraph summary on What is a Hero Listing Video & Why You Need it For Your Next Listing by TBX Air

Assignment Example

• View the small screen layout
• View the medium screen layout
• View the large screen layout

Assignment Checklist

Unit13 Hero Video (10 pts)

Hero Video

• Create a 20 to 30 second video looping video (end frame matches the first frame)
• Export at 720 wide by 250 tall
• Compress with no sound as an .mp4 and .webm (handbrake)
• Output file sized should be betwen 4MB and 7MB per video
• Hero video should scale with the page width

Overlay Text

• Position a small chunk of text over the video
• Set the font-size to a vw value so it scales with the page automatically
• Add a text shadow so it visually pops off the video

Page Title Removed

• Install a plugin to remove the page title
• Remove just the home oage title so the video fits under the header

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail