There is a great design trend right now where websites contain a top section with background image or video. It's called hero video or hero image. Today you're building one!

The goal of today's assignment is to create a hero video that is responsive and retrieves the right video file depending on the size of the screen using media queries.

As inspiration, we'll look at confetti.events homepage. They have a big video section at the top of the page. Over the video you can see a title and a button.

In this assignment we have collected six video files, three .mp4 and three .webm, in three video sizes for you to use. You can find them in the video folder of this repo. We will use the smallest format (360x240px) for mobile, second largest (720x480px) for tablets and the largest format (1280x720px) for desktop.

To complete this assignment your code needs to:

1. Use media queries to display the right video element for each screen size. Hide video elements you don't want to show with display: none in your CSS.
2. Video in full width for every screen size. Place the video at to top of your page with no margins.

• MDN Video and Audio content
• MDN Using Media Queries
• W3 Schools Display Property

Learning how to think as a web developer is learning how to be an expert in problem solving. So whenever you get stuck start with step 1 and continue until problem solved.

1. Google! In English, type in the error message if there is one, search within the language you're using (ie CSS, JavaScript etc).
2. Ask your code buddies in your Company.
3. Ask your fellow students in Slack.
4. Ask Damien or David. Please note: we are part of a sharing community - share the answer with your fellows.

After completing this assignment you should be comfortable using the video element, link to video files in the html and use media queries to display the right video source for the right screen size.

Done with the main task? Here's some ideas for things to continue with:

1. Have a title and button over your video by using position: absolute and z-index to get everything in the right place.