One of the more interesting CSS properties that can be applied to the video element is opacity. It is quite effective if the video needs to be less prominent on the page or, in the case of background video, actually sunk into the background of the page.
- [Tutor] There are quite a few CSS properties…that can be applied to the HTML five media element.…And one of the more common is the use of opacity.…And you probably thinking video?…Where would I use that?…Well among them would be instances…where you want to downplay the visual impact of a video…on the pitch or where the video…is being used as background video.…And there are text blocks and other content over the video.…That are more important than the eye candy below it.…The bottom line is,…opacity can be used whenever you choose to…but use it judiciously.…
Just because you can apply is no reason to apply it.…Now the opacity property is been around for quite a while.…But it was only when it made the official CCS three line up…that it became a standard across all browsers.…So lets see how this works.…Indicate yourself started…open the opacity dot HTML file…found in your chapter download.…I am gonna open the file on the browser…and will just pop over to chrome.…And you can see one of the video…just sitting there over to the left.…
- 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.