Adding Video to the New Harvest Food Bank Website
Problem: You volunteer at a local food bank called New Harvest Food Bank that collects
community food donations and provides food and other services to those in need. You have already
created a responsive website but now need to add a video to the home page to attract volunteers.
You also need to format the video on the page. Create and style the video as shown in Figure 9–27.

Instructions: Perform the following tasks:
1. Save the lab1\media folder from the Data Files for Students to your lab1 folder.
2. Open your text editor and then open the index.html document in the lab1 folder and update
    the comment at the top of the page to include today’s date.
3. In the main element of the index.html document, insert a video element with autoplay and controls attributes.

4. Specify the following three source files within the video element and insert the appropriate
    type attribute and value for each source.
src="media/volunteer.mp4"
src="media/volunteer.ogg"
src="media/volunteer.webm"
5. Create a paragraph element below the source elements with text that states Your browser
    does not support the video element.
6. Wrap the video element in a div element and include a class="video" attribute and
    value.

7. In the fbstyles.css file, update the comment with today’s date, and then create the following new
     style rules above the media queries and include comments for each:

.video {
text-align: center;
padding: 1em;
}
video {
border: 0.2em solid #FF6600;
height: auto;
max-width: 100%;
}

8. Save all files, open the index.html page within a browser, and then view the page, as shown in Figure 9–27.
9. Validate your HTML code and fix any errors.
10. Validate your CSS code and fix any errors.
11. Submit your assignment in the format specified by your instructor.
12. In this assignment, you wrapped a video element within a div element. Could the
      video element be wrapped within an HTML5 semantic element, such as an article, aside, or
       a section? Why or why not?