Cascading Style Sheets offer you the opportunity to draw the user's attention to the video content. In this exercise, use CSS to apply a box around a video, set the thickness of the line, add some padding, and even apply a drop shadow to the box.
- [Instructor] In this chapter,…we are going to be using CSS to manipulate…and present video on the page.…And one of the really neat features…of cascading style sheets, is they give you the ability…to manipulate video, rather than just,…well, stick it on a page.…In this example, we will be using CSS…to add a box around the video.…Not only that, we're going to round off the corners,…add a nice drop shadow, and a bit of padding…to the video container as well.…All of this, to draw the users attention to the video.…
So let's get started.…And to get yourself started…using your preferred code editor,…open the box.html file found in your chapter download.…If you test this in a browser,…and I'm just gonna pop over to Chrome here,…you can see that the video, well,…it's physically quite large,…and it's just sitting there on the page,…hanging out of the container…that it's supposed to be inside.…So let's jazz it up.…And I'm going to return back to brackets…which is my code editor.…And the first thing I wanna do is resize the Video.…
- 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 Intermediate
Web Video: Develop Your Video Presencewith Rick Allen Lippert41m 54s Intermediate
Web Video: Makeup Techniqueswith Rick Allen Lippert25m 47s Intermediate
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.