12
QUICK GUIDE: HOW TO IMPROVE YOUR WEBSITE BACKGROUND VIDEO

Quick guide: how to improve your website background video

Embed Size (px)

Citation preview

Page 1: Quick guide: how to improve your website background video

QUICK GUIDE: HOW TO IMPROVE YOUR WEBSITE BACKGROUND

VIDEO

Page 2: Quick guide: how to improve your website background video

COMPRESSVideos that have high quality resolution tend to load slower than those of that with low qualities. But of course you wouldn’t want to compromise, so it is advised to compress your background video down to the lowest tolerable bitrate as possible, to have them load faster.

Page 3: Quick guide: how to improve your website background video

AVOID POINTLESS MOVEMENTS

Your video background for websites must not steal the users purpose why they visited the site. It must compliment only the website yet does not overpower the content. It must not be attention-grabbing to the point that it confuses your visitors. Movements such as excessive panning, unstable movements or swift cuts.

Page 4: Quick guide: how to improve your website background video

PROVIDE CONTRASTIf there is a chance that your texts overlaps your background motion, ensure that it is still readable. Be sure to provide legible fonts and contrasting color to be able to decipher the words clearly. Have a testing of colors or you may add text-shadows to enhance the writing.

Provide contrast to your text and background

Page 5: Quick guide: how to improve your website background video

LIMIT SIZE AND LENGTH

Remember that time is of value to our users. They would want to watch only a short web video background of 30 seconds than in 3 full minutes. Or it is better if you try to use short looping videos.Also the users prefer to download small sized videos with 1-2MB than 2omb or so.

Page 6: Quick guide: how to improve your website background video

USE OVERLAY If your motion background is, let’s say pixelated, hide it through using overlays. This will at least enhance the motion background. It will help a little to make it look better, if you use a solid color and transparent overlay.Find the right pattern-overlay on poor-quality videos.

Page 7: Quick guide: how to improve your website background video

STRETCH VIDEOBe sure to stretch the video background html5 to exactly fill it’s container. How to this? There is a property known as “background size” that has an option “cover”. This ensures that the video will fit no more no less of the whole element it should fit into.

Page 8: Quick guide: how to improve your website background video

PROVIDE PAUSE BUTTON

Whether you like it or not, there are users who would want to pause the video backgrounds website. May it be for the reason that it is distracting them, or feels uncomfortable for them, or have the notion that it is slowing down their computer. So it is best to offer them that pause button.

Page 9: Quick guide: how to improve your website background video

LOOPINGWhen you are to use loop structure, you are at least taking a risk in slowing your visitor’s CPU and thus, will hit the return button. So be sure to use the “loop: attribute in moderation. Just be sure also to reset the timer, if ever the websites with video background are paused and played automatically.

Page 10: Quick guide: how to improve your website background video

CONSIDER DEVICES USED

Nowadays video background support from mobile phones are not yet heightened. iOS does not allow auto-playing of such videos even in android devices as well. Remember that the idea of a websites with video backgrounds are to enrich visual perception of the site. But because there are no significant data on the said videos, might as well use a picture background instead.

Page 11: Quick guide: how to improve your website background video

So there you have some simple guidelines on how to make a video background website and how to improve them. Bear in mind that these videos are used to add to visual effects on your site so that more users who are curious about it, may visit your page.

Page 12: Quick guide: how to improve your website background video

Videos as backgrounds are now a trend it continues to grow. So be sure you have the

correct motion pictures in your site now. Talk to our team of experts at:

videobackgroundwebsite.com