Video can add a lot of interest and life to a website. However, there are several important considerations to think about when adding video.
File Size vs. Load Time
Videos require a lot of data and therefore the file sizes are large compared to other website assets like text and properly compressed images.
I’ve seen many folks make the mistake of displaying a huge video hosted on the same server as the website – leading to a long page load time and stress on the server.
One solution is to compress the video as small as possible by editing it down to 15 seconds or less with the lowest video quality that is tolerable.
Another solution is to host the video file somewhere other than your web server, which is described below.
Hosting the Video File
If you must play a long, high-resolution video on your site, you should put the video on a separate server, not on your web server.
One way of doing this is to upload the video to YouTube or Vimeo, then embed the video from there. The video will load from their servers, not yours.
If you don’t want YouTube or Vimeo branding in the video player, then opt for a paid Vimeo subscription that allows direct access to the video file.
If you have a lot of videos, there are other video streaming services that can be more cost-effective.
Auto-Playing Videos
My clients love auto-playing videos. Of course, it’s great when you land on a site and a video just starts playing without having to click anything!
If you want your video to auto-play, most browsers require that the video be muted. Part of the reason is that it can be obnoxious if video sounds start blaring as soon as you load a site.
And note, for accessibility compliance, any auto-playing video over 5 seconds long needs a pause button. Most builders don’t include this option by default, so I’ve had to code my own in Divi and Squarespace in the past.
Background Videos
If you want your video to play in the background with content on top of it, keep in mind that this also can be an accessibility violation (text contrast) unless your entire video has a good contrast with the text over it.
Videos Containing Text
Videos with text can be tricky due to how the video is cropped on mobile. If you have a landscape video, then on a phone it might be tiny if you want to see the whole video, or cropped if you want the video to fill the screen, possibly leading to your text being cut off.
Also, text inside of video might not be scraped by Google.
For these reasons, it might be best to avoid having text in your video.
Copyrights
Last but not least, do not randomly download videos from the Internet to use on your site without being fully aware of the licensing of the videos.
Your Best Options
The absolute easiest option is to upload your video (of any length) to Vimeo and just embed the player on your site, so that it plays when the user clicks “play” (i.e., not autoplay). Because your server is not hosting the file, it won’t slow down your site as much, and the player has built-in transport controls so there’s no coding involved, other than pasting in the embed code.
If you want a background auto-playing video, the easiest option is to edit your video file to be as small as possible (i.e., 5-7MB) and upload it to your site. Most page builders have a way to play that video in the background of a section. Note, however, that if you want better accessibility compliance, you’ll need to add start/stop buttons which may require some JavaScript coding.
If your video file is not small, the next option would be to upload it to paid Vimeo account, where you can get direct access to the mp4 file and embed it from there.
I can implement any of these options. Let me know of any questions in the comments below! – Brian
I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.
