Decorative Videos

Decorative videos are short, eye catching videos without audio. They are becomging more commonly requested, therefore designers should become familiar with best practices in order to fully explain usage and limitations to clients.

The below placeholder video may be used on a screenshot IF necessary; however, any client who wishes to include a decorative video as part of the design MUST deliver said video to be placed into the design BEFORE approving and moving into development.

Be sure to include this js file in your screenshot: videoControls.js

Note for Developers: It is only necessary to link the above js on the page(s) where the video is being displayed. You would not want to link it in the template unless the video is on every page.

Best Practices

All videos on a website must have a play/pause button. This button must also be ADA compliant, meaning keyboard accessible and readable by screen readers.
Video should be free of audio. Videos with audio MUST use the standard youTube embed code.
Video length should be fairly short, preferably designed to loop or fade out to a static image. Ex. repetitive movements, such as an iTero scan, that can easily loop should be around 6-10 seconds. A more standard video like an office sweet or footage of staff with patients can be 20-40 seconds.
Movement should be smooth so as not to overstimulate those with sensitivities to movement. No flashing that could induce seizures.
All videos must be compressed for web. Sometimes file compression can greatly reduce image quality, but there are ways to mask the loss such as a monochrome filter or a light texture overlay that masks the pixelation.

HTML Structure

<div id="videoContainer">
    <video id="video" poster="images/placeholder.jpg" playsinline autoplay muted loop>
    	<source src="images/video.mp4" type="video/mp4;codecs="avc1.42E01E, mp4a.40.2"">
    </video>
    <div id="videoControls">
    	<button id="pausePlay" type="button">Pause</button>
    </div>
</div><!-- end video -->
<!-- Include these files in the <head> OR at the bottom just before </body>) -->
<script src="js/videoControls.js">//</script>

Decorative Videos

HTML Structure

Basic Usage