Banners

Video banners

Video banners can add an element of surprise to your content and provide your users with a more immersive experience. When including video banners, make sure you have both an MP4 and WebM file to include, and a fallback image that can be substituted on mobile and in situations where video won't work. 

Video banners will automatically mute all audio.

Video banner size requirements

Video banners should be less than 2 MB in size. To meet this size requirement, your video should:

  • Have a 3:1 aspect ratio
  • Be as short as possible
  • Be compressed

If you’re having difficulty, try:

  • Moving from a large resolution to a smaller resolution that will be upscaled (900X300 instead of 1800X600)
  • Making your video shorter (eight second loop vs. 20 second loop)
  • Increasing compression

Accessibility requirements

To meet accessibility standards, you must include a written transcript for your video. You can learn more about transcripts and other accessibility requirements on the IU Accessibility website.

Show/hide markup
<div id="banner" class="section banner bg-video">

    <div class="hide-for-medium img--small">
        <div class="bg-image-cover" style="background-image: url('');"></div>
    </div>
    <div class="show-for-medium hide-for-large img--medium">
        <div class="bg-image-cover" style="background-image: url('');"></div>
    </div>
    <div class="show-for-large img--large">
        <div class="bg-image-cover" style="background-image: url('');"></div>
    </div>

    <div class="bg-video-viewport" data-height="600" data-width="1800" data-mp4="video.mp4" data-webm="video.webm"></div>

</div>
<div class="visually-hidden">
    <p>Description of the video:</p>
    <p>[Add transcript here with one descriptive line per paragraph element.]</p>
</div>