Using the width and height attributes, you can resize a video using either percentage or pixel values. There are, of course, issues with resizing which are caused by the browsers.
- [Educator] There are going to be times…where the video's dimensions are a lot larger…than the space you have given it on the webpage.…There is a solution to this and as I always ask my students,…"Do you wanna do it the hard way,…"or do you wanna do it the easy way?"…Of course, it's the easy way.…How easy?…Well, let's find out.…Open the saved file from the previous exercise…or open the resize.html file found in your chapter download.…And what I want you to do is to just enter the following…attributes into the video element.…
And the first attribute is width,…and I'm just gonna click on the word width,…and I'm gonna put in a percentage, 50%,…and I'm gonna come over here, add space,…and I'm gonna also change the height, equals,…and again, we're gonna use the quotation marks, 50%,…and there we go.…So what I've done is resize the video to half size,…so I'm just gonna save it and I'm gonna pop up over…to Chrome and you can see, there it is, half size.…
As well, the poster frame shrunk, too.…I'm gonna come back to Brackets 'cause there's a few things…
- 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 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.