The whole premise of CSS is to give you control over the look of a web page. Thus, there is no reason why a video can't be treated just like an image and have a text block wrap around the video.
- [Instructor] Though it is common to see video…in its own block or container on the page,…there is absolutely no reason why it can't…be treated like a graphic on the page.…And the beauty of CSS is you can do just that.…In this exercise, we are going to embed the video…into a paragraph of text and have that text…wrap around the video.…And we're also gonna tone down that border…and the shadow.…So to get yourself started, open the TextWrap.html file…found in your chapter download.…And when you test the file before we start,…you can see that we have this ginormous video…literally sitting above a bunch of text.…
And the video is weighing down the text…because the text is small, and it's just not working.…It simply is not working.…And we're gonna change that and have this first paragraph,…this paragraph right here, wrap around the video.…So I'm gonna go back to the code.…The first thing we're gonna do is…we're going to float the video.…So we'll just come over here in line 36…and we'll use the float property…and type in float:right;…
- 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.