{"id":78,"date":"2026-01-11T14:30:45","date_gmt":"2026-01-11T19:30:45","guid":{"rendered":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/?post_type=chapter&p=78"},"modified":"2026-01-11T21:36:52","modified_gmt":"2026-01-12T02:36:52","slug":"chapter-4-video","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/chapter\/chapter-4-video\/","title":{"raw":"Chapter 6 \u2022 Video","rendered":"Chapter 6 \u2022 Video"},"content":{"raw":"Videos play an increasingly important role in web design due to the growth of online education and retailing. Students want to learn how things work, and customers appreciate being able to judge the function and relative size and weight of products.\r\n\r\nEnabling factors for digital video include faster network speeds, higher capacity and faster disk drives, more powerful processors, and higher quality but lower cost monitors \u2014 all have made videos more popular and easier to create and view.\r\n

Video Size<\/h2>\r\nVideos are made up of multiple bitmapped images, analogous to moving Photoshop images, and produce very large files. Therefore it's important to consider the appropriate resolution and length of the video before incorporating it in a web site.\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Common Video Formats<\/th>\r\n<\/tr>\r\n<\/thead>\r\n
Name<\/em><\/td>\r\nResolution (px)<\/em><\/td>\r\n<\/tr>\r\n
720<\/td>\r\n1280\u00d7720<\/td>\r\n<\/tr>\r\n
HD<\/td>\r\n1920\u00d71080<\/td>\r\n<\/tr>\r\n
4K<\/td>\r\n3840\u00d72160<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Video Editing<\/h2>\r\nEditing videos is possible with programs including Apple iMovie and Adobe Premiere. Common video edits include deleting unwanted portions or scenes, combing separate clips of scenes, and adding effects including titles, fade from black at the beginning, fade to black at the end, and transitions between scenes or clips.\r\n

The <video> Tag<\/h2>\r\nTo place a video in the web page, use the <video> tag:\r\n
<video width=\"1280\" height=\"720\">\r\n    <source src=\"video.mp4\" type=\"video\/mp4\">\r\n<\/video>\r\n<\/pre>\r\n
Design Effects for Videos<\/h2>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
Effect<\/em><\/td>\r\nCSS Code<\/em><\/td>\r\n<\/tr>\r\n
center the video in the page<\/td>\r\ndisplay: block; \/* videos by default are inline elements; must set to block to center *\/\r\nmargin: 0 auto;<\/td>\r\n<\/tr>\r\n
place a border around the video<\/td>\r\nborder: 1px solid darkgray;<\/td>\r\n<\/tr>\r\n
place a drop shadow under the video<\/td>\r\nbox-shadow: 2px 3px 6px darkgray;<\/td>\r\n<\/tr>\r\n
<\/td>\r\n<\/td>\r\n<\/tr>\r\n
<\/td>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
Large Files<\/h2>\r\nSome free publishing platforms and servers have file size limits which can be a problem for large video files. One workaround is to upload the video to YouTube and then embed the video in the web page.\r\n\r\nThis 5-min. embedded YouTube video by Toronto Metropolitan University teaching assistant Mary-Anne Buerano explains how to edit videos in both iMovie and Premiere. (Note the design effects applied to the video movie poster.)\r\n\r\n\"\"<\/a>\r\n
Reference Document<\/h2>\r\nHow-to Video: rich-adams.net > Completed Tutorials > Video<\/a>","rendered":"
Videos play an increasingly important role in web design due to the growth of online education and retailing. Students want to learn how things work, and customers appreciate being able to judge the function and relative size and weight of products.<\/p>\n
Enabling factors for digital video include faster network speeds, higher capacity and faster disk drives, more powerful processors, and higher quality but lower cost monitors \u2014 all have made videos more popular and easier to create and view.<\/p>\n
Video Size<\/h2>\n
Videos are made up of multiple bitmapped images, analogous to moving Photoshop images, and produce very large files. Therefore it’s important to consider the appropriate resolution and length of the video before incorporating it in a web site.<\/p>\n\n\n\n\n\n\n\n\n
Common Video Formats<\/th>\n<\/tr>\n<\/thead>\n
Name<\/em><\/td>\nResolution (px)<\/em><\/td>\n<\/tr>\n
720<\/td>\n1280\u00d7720<\/td>\n<\/tr>\n
HD<\/td>\n1920\u00d71080<\/td>\n<\/tr>\n
4K<\/td>\n3840\u00d72160<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Video Editing<\/h2>\n
Editing videos is possible with programs including Apple iMovie and Adobe Premiere. Common video edits include deleting unwanted portions or scenes, combing separate clips of scenes, and adding effects including titles, fade from black at the beginning, fade to black at the end, and transitions between scenes or clips.<\/p>\n
The <video> Tag<\/h2>\n
To place a video in the web page, use the <video> tag:<\/p>\n
<video width=\"1280\" height=\"720\">\r\n    <source src=\"video.mp4\" type=\"video\/mp4\">\r\n<\/video>\r\n<\/pre>\n
Design Effects for Videos<\/h2>\n\n\n\n\n\n\n\n\n
Effect<\/em><\/td>\nCSS Code<\/em><\/td>\n<\/tr>\n
center the video in the page<\/td>\ndisplay: block; \/* videos by default are inline elements; must set to block to center *\/
\nmargin: 0 auto;<\/td>\n<\/tr>\n
place a border around the video<\/td>\nborder: 1px solid darkgray;<\/td>\n<\/tr>\n
place a drop shadow under the video<\/td>\nbox-shadow: 2px 3px 6px darkgray;<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Large Files<\/h2>\n
Some free publishing platforms and servers have file size limits which can be a problem for large video files. One workaround is to upload the video to YouTube and then embed the video in the web page.<\/p>\n
This 5-min. embedded YouTube video by Toronto Metropolitan University teaching assistant Mary-Anne Buerano explains how to edit videos in both iMovie and Premiere. (Note the design effects applied to the video movie poster.)<\/p>\n
\"\"<\/a><\/p>\n
Reference Document<\/h2>\n
How-to Video: rich-adams.net > Completed Tutorials > Video<\/a><\/p>\n","protected":false},"author":6,"menu_order":6,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-78","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":13,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/78\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/78\/revisions\/141"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/78\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapter-type?post=78"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/contributor?post=78"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/license?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}