TABLE OF CONTENTS


How do I make an MP4? 

MP4s can be generated using Handbrake (a Mac App which allows you to optimize file size for the web) or tools like Adobe Premiere. If the source video is high quality on the YouTube account, there's a number of online free conversion tools, like https://cloudconvert.com/mov-to-mp4


What should the video specs be?

The source video needs to be converted and edited down to no more than a 20 ish second loop (which also optimizes the screen resolution).  Shorter videos will be easier to get under the size limitation, so when in doubt, edit your background videos to be shorter and visually impactful (Use all your Tiktok content creation skills on hand!)  The video background adds a lot of potential page load time, so we want those videos to be as optimized as possible without reducing quality.


You’ll want a 16:9 aspect ratio for most uses on the site, although some fields have different aspect ratios specified. Typically you’ll want at least an HD 1080p resolution, or a 1920 x 1080 size on your video.


Background video can be exported without audio (the audio won’t play whether the video has audio or not).



Video Compression and File Size Limitations

Compress for web,  but test your compression settings for quality and the file size of your final video. Background videos will have to be compressed as much as possible before uploading using mp4 format and the H264 codec. When properly compressed, this should be no more than a 6 MB file.  A recent update to iOS tends to filter autoplay on videos above 6MB in size, so we recommend using a video below that size limit.  This can be a lot of compression - a shorter video loop will require less video compression to hit this file size limitation.


Where should I upload it?

The file should be uploaded to a static file server with public access permissions:   Amazon AWS, Dropbox, Google Drive should all work if the file is uploaded with "Anyone can view" permissions. AWS is a complex setup but very cost effective and has better performance and load times than Dropbox and Google; it requires a separate application to upload to it.


Another option is to hook up your AWS account as a CDN to this site which should give a performance boost. In that instance, AWS would host all your photos and videos and reduce site load times. Videos compressed below 8 MB could be uploaded from the site. 


Don't upload them to the website or YouTube. Video files will be a bit too large to serve from the website itself, and Youtube links can't be used directly for video backgrounds.


If you upload your video to dropbox, the file URL needs to be adjusted to not include Dropbox's header and footer.

  1. first create a share link for your file, e.g. https://www.dropbox.com/s/1234234xxxxxxxxx/MyVideo.mp4?dl=0
  2. Copy the link and paste into the Background video field.
  3. Change the '?dl=0' in the url to '?raw=1'
  4. The video should now embed properly on your page.


If you upload your video to Box.com, the file URL needs to be adjusted to not include Box.com's header and footer.

  1. Create a public shared link for your mp4 file with view and download access, e.g. https://yourorganization.box.com/s/4vvs481rjm7ipxc3f5gfrxpv4i5vu1y7
  2. On the box website, right click on your video and choose "Copy Video Address". This will be a raw link with a token such as https://dl.boxcloud.com/api/2.0/internal_files/1424049964787/versions/1561269979187/representations/mp4/content/?access_token={long token}..&box_client_name=box-content-preview&box_client_version=2.102.0
  3. Paste the full raw link into a "Background Video MP4" field