Lynda.com Design the Web HTML Background Video
Background video is a great way to market your product and in this Lynda.com video training course entitled Design the Web: HTML Background Video with Chris Converse you will learn how to add an autoplay background video to your webpage. You will also learn how to use CSS to place other design elements over the background video. And the exercise files are free for even the Standard membership.
Converse starts with a bare bones html file and builds the main div container for the design elements: the text tagline, the logo svg and the video. He demonstrates how to use autoplay in the video tag and how to set up the two most common types of video, .mp4 and .ogg.
Next, Converse moves to the CSS files and the CSS to style and position the video and the centered logo image. He moves on to do the same for the tagline text. I especially liked his technique for working with borders.
Converse then discusses how to make this layout responsive using media queries for medium and small screens and CSS. Again, he sets styles for the video, logo and the tagline. He also demonstrates how to set a replacement image for small screens that cannot play a video and to hide the video.
Moving on to more complex issues, Converse demonstrates how to use JavaScript to add more complex control over the display for features of mobile devices, such as touch events. He introduces a third party website called Modernizr that will generate CSS classes that can be added to the page via JavaScript based on the features of the current device. He demonstrates how to generate the code, download and add it to your webpage code.
In the last lesson, Converse demonstrates how to code the position and other styles for the layout so that the video covers the entire browser window.
This course was about the HTML and CSS used to style and position a background video for web and mobile devices. However, I was hoping that the author would discuss options for hosting and optimizing the video file for fast download. Also, it would be nice to know how to add interactive design elements over the background video instead of just static elements.
Chris Converse has a degree in graphic design from Rochester Institute of Technology and 22 years experience in design and technology.
https://www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html
Disclosure: I was not financially compensated for this article. The opinions are completely my own based on my experience.
Converse starts with a bare bones html file and builds the main div container for the design elements: the text tagline, the logo svg and the video. He demonstrates how to use autoplay in the video tag and how to set up the two most common types of video, .mp4 and .ogg.
Next, Converse moves to the CSS files and the CSS to style and position the video and the centered logo image. He moves on to do the same for the tagline text. I especially liked his technique for working with borders.
Converse then discusses how to make this layout responsive using media queries for medium and small screens and CSS. Again, he sets styles for the video, logo and the tagline. He also demonstrates how to set a replacement image for small screens that cannot play a video and to hide the video.
Moving on to more complex issues, Converse demonstrates how to use JavaScript to add more complex control over the display for features of mobile devices, such as touch events. He introduces a third party website called Modernizr that will generate CSS classes that can be added to the page via JavaScript based on the features of the current device. He demonstrates how to generate the code, download and add it to your webpage code.
In the last lesson, Converse demonstrates how to code the position and other styles for the layout so that the video covers the entire browser window.
This course was about the HTML and CSS used to style and position a background video for web and mobile devices. However, I was hoping that the author would discuss options for hosting and optimizing the video file for fast download. Also, it would be nice to know how to add interactive design elements over the background video instead of just static elements.
Chris Converse has a degree in graphic design from Rochester Institute of Technology and 22 years experience in design and technology.
https://www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html
Disclosure: I was not financially compensated for this article. The opinions are completely my own based on my experience.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Follow @ArtAnimationTut
Tweet
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
