Video Banner Configuration
Videos can be a great way to add something more to the page, prodivde context and emotion to content, and with the great compression algorithms now, they don't have to overly bloat the weight of the page. Responsive videos can very easily be added to USU pages with some just a few classes.
Basic Configuration
The basic and most full-proof configuration is to include a basic div with the class video-banner. You then need to specify the video you want to load by adding a data-loop attribute which will be the URL or path to the video you want to loop in the background. Typically the video will correctly adjust the aspect ratio, but you can enforce it with the data-ratio attribute set to 16by9 or 4by3.
This code will simply make a div and inside of it add a video which will loop over and over again. It will also add accessible controls to pause the video if needed. Depending on the context and content of the video, that might be enough.
Sometimes you don't care if the video maintains a specific aspect ratio, you just want to make sure it fills the space behind content. For this add the data-cropped="true" attribute and do not set a ratio attribute. This will make the div the width/height based on your content and the video will scale to fit in the background. This isn't always ideal, but is a good option when the content is more critical than the video.
Adding Content
When using the video as a banner, it's generally used as a background. The video-banner container acceptse normal jumbotron classes and the content contained within also functions the same. See the Banners documentation for more information on options.
Playing Videos
The background video can serve as a bumper to entice users to view the full video. To add this functionality you need to add a button to trigger the play, and the video url. The video URL is added to the video-banner div with the data-video attribute. The play button can be added anywhere on the page. Give it the class video-banner-play and a data-target with the ID of the video-banner div.
When clicking play, any divs inside with the class video-banner-content will fade out, and at the end of the video, they will fade back in. You can extend this functionality by hooking onto the events.
Events
- setup.usu.video-banner
- Fired when the video banner is initially setup.
- ready.usu.video-banner
- Fired after the video banner setup is complete, just before the video starts looping.
- restarting.usu.video-banner
- Fired when the video banner is restarting its loop at the end of the video.
- playing.usu.video-banner
- Fired when the play button is clicked to initiate the video playing.
If you have special content that needs to be altered when the play button is pressed and replace when the video ends, you can remove your content on the playing event and add it back on the restarting event.
Recommended Video Specifications
Background videos play without sound, and are generally, though not always, obscured. They need to load quickly so optimization is key. Here are the recommended settings:
- Encode using H.264 codec in a .mp4 container.
- Lower quality to 720p or 540p as needed.
- 2-pass encoding at 2Mbs.
- Use lowest possible audio quality setting since sound is muted.
- Try to limit length to under 30 seconds.