In this exercise, add a full-screen background video to a webpage. Begin by creating the ID selector for the video. In that selector, use the z-index property to push the video into the background of the page.
- [Instructor] In the previous exercises,…we created the video that's going to go…into the background of a webpage,…and we created them in After Effects and Premiere.…In this exercise we're going to actually…put those videos into a webpage.…So to get yourself started,…open the background dot HTML file found…in your chapter download.…Now I'm going to be using Brackets here,…but you can use any code editor you wish.…So I'm going to start here with the video ID selector,…because we're going to control the properties…of the background video using CSS.…
So select this comment right here,…the video ID selector.…So we'll start with the pound sign,…and we'll give it the ID of video dash BKGRND,…just like that, and then we just add our braces,…and press the return key,…and now we can start adding the properties.…The first property we're going to throw in…is absolute positioning: we want it to be…in the same place every time,…so position (typing)…and I'll just set that to absolute,…and the other thing we don't want to do…is have it above the bottom of the page,…
- Key video formats used to publish on the web
- Encoding video that's optimized for online delivery
- HTML5 native video embedding and interaction
- Styling video components with CSS
- Captioning video
- Preparing video for social media
- Using Dynamic Link
Skill Level Beginner
Design the Web: HTML Background Videowith Chris Converse28m 35s Beginner
Web Video: Develop Your Video Presencewith Rick Allen Lippert41m 54s Appropriate for all
Web Video: Makeup Techniqueswith Rick Allen Lippert25m 47s Appropriate for all
Exercise files1m 11s
1. Web Video Formats
2. Encoding Video
3. HTML5 and Video
4. Video and CSS
5. Playing with Video
Next steps1m 23s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.