Often, a semi-transparent color overlay will be placed over the video to help the text above it stand out. If you have text or other element over your video, make sure there is enough contrast to read it. Now that the video is ready to display on your page, consider the following points: Provide Contrast Using "source" elements, the browser will use the first one it understands (e.g., Safari will use mp4 and Chrome will use webm). We provide multiple formats because not all browsers support the same video formats. Here is a simple example of how the code might look on a webpage: The compressed file sizes of these videos will probably be very similar. If you want to cover your bases with various browsers, export both mp4 and webm format videos. Don't forget this image should be optimized like any other image. It's commonly the same as the first frame of the video, so the video loading looks seamless. The poster image is the image that is displayed while a video is loading. There are even online services that will optimize video. If you're more technical, you can optimize videos using the command line using ffmpeg. When exporting your video, make sure to omit the audio channel.Īs far as how to optimize the video, we use a free Mac app called Handbrake, which has been around for many years and has a number of presets and settings that give you lots of control. 3) Remove the Audio Channelīackground videos won't autoplay with sound anyway, so an audio channel is not necessary. We're not producing a Hollywood movie, after all! Fewer frames means a smaller file size. 2) Keep The Frame Rate LowĪ frame rate of 24 or 25 frames per second is adequate. There really is no reason to export a background video in Full HD (1920 x 1080) - that's simply overkill and wastes bandwidth. Your video can be HD (high definition), which is 720p video (1280 x 720 pixels). There are three main things to do here: 1) Keep Dimensions Standard HD Also, there may be text or a call to action link over the video, and a lot of motion will make that harder to see and interact with. You do not want to give your visitor a sense of vertigo when they visit your site if there is fast motion. If you need to show 60 seconds worth of content, maybe you need an actual promotional or marketing video! Reduce Motion and Speed A smaller duration clip keeps the size reasonable, and can begin streaming quicker. There is no reason for video to be longer than 15 or 20 seconds. Remember, this is a background video, not a product or instructional video. Your team eating lunch, your office, people putting sticky notes hither and thither - news flash: your user has probably already read your value proposition and either desired to keep scrolling, clicked away, or closed the tab. No one is going to sit and watch a 60 second background video. In this post I'll cover the main points you need to know when creating a background video for a website. The issue is that these videos can be large and degrade the user experience if not optimized correctly. There is no denying that a well done background video can really set the tone of your website and add impact to your page and message. Usually located at the top of a page, they bring life and motion to what might otherwise be another boring value proposition. Here is a quick screenshot.You've seen them everywhere: large, full-width background videos on websites. You can also get the code on GitLab here. The project we will be building has been deployed and can be found here. The goal is to teach you how you can implement the same with whatever video you want. Today we will be building a simple website with a One Piece trailer as the Full Screen Background. So if you are interested in accelerated growth, check out the post here.įor today's post, let's build a One Piece AD. If you aren't caught up, there are a few projects you can work on as a beginner front-end developer that will allow you to grow significantly faster than your average beginner. Welcome back readers, we will be continuing our series on CSS projects for beginners.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |