Accessibility Tool

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.

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>

Basic Usage

2020 © All Rights Reserved | Website Design By: Intrado | Login