<div class="page-container">
  <div class="video-container">
    <video autoplay muted loop width="100%" height="100%" volume="0" canplay="false" role="img" aria-label="toy robot canon with motorized rotor">
      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
      <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
      <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp">
      <img src=" http://placehold.it/350x150" alt="test alt img" />
    <button type="button" class="video-btn">
      <span class="visuallyhidden">play or pause the video-image background. Video has no sound or narration</span>
      <i aria-hidden="true" class="fa fa-pause"></i>
  <div class="page-content">
    <h1>Super Cool Motor Robots!</h1>
    <p>Welcome to my site</p>
      <li>video element's img alt not read since it's a fallback only if video isn't supported </li>
      <li>instead, aria-label + role="img" added</li>
      <li>tested in VO & NVDA</li>
    <p>CAVEAT - this is a way to make a somewhat awkward pattern a little less awkward. Depending on the video, text might be a little hard to read. Also, site owners are the best judges of whether or not the video actually needs "alt" text, or if it's just decoration. In that case, aria-hidden may be the better approach.
    <p>Having a video autoplay and loop may not be suitable for all audiences either, especially if the video has a lot going on visually and can be distracting.</p>
    <p>For more background, read Emma Sax's<a href="http://www.punkchip.com/accessible-html-video-as-a-background"> article about accessible background videos</a></p>

/* font awesome added for icon, this can be done in any way */
/* maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css */

/*page container*/
.page-container {
  position: relative;
  min-height: 800px;

/*video background*/
video {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1000;
  overflow: hidden;

/*video overlay to make text a litle less crappy*/
.video-container:after {
  display: block;
  z-index: 100;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.5);

/* play/pause button styles */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

.video-btn {
  border: none;
  background: none;
  color: #fff;
  position: absolute;
  display: block;
  font-size: 60px;
  z-index: 101;
  opacity: 0.5;
  bottom: 10%;
  right: 10%;

.video-btn:focus {
  opacity: 1;

.is-paused .video-btn i:before {
  content: "\f04b";

/*page styles*/
body {
  font-family: "Helvetica", Arial, sans-serif;
  background: #000;
  color: #fff;

.page-content {
  margin: 0 auto;
  padding: 40px;
  position: relative;
  z-index: 100;
  max-width: 1410px;

h1 {
  color: #fff;
  margin: 100px 0 15px;
  font-weight: bold;
  display: inline-block;  
  font-size: 30px;

ul {
  margin-bottom: 20px;

ul, li {
  list-style: disc;
  list-style-position: inside;

p {
  max-width: 600px;
  line-height: 1.4;
  color: #ddd;

a {
  color: inherit;
var $videoTrigger = $(".video-btn");
var $videoContainer = $(".video-container");

$videoTrigger.on("click", function(evt) {  
  if ($videoContainer.hasClass("is-paused")) {
  else {

    $('#play-pause-button').click(function () {
   if ($("#media-video").get(0).paused) {
   } else {

External CSS

  1. //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js