Video

HTML
View
Context
Assets
Info
Notes


        
        <div class="video-container" data-video-type="">
    <video preload="metadata" data-youtube-id="93UgG72os8M" width="450">
    <track src="../cc/keyboard-en.vtt" label="Captions" kind="captions" srclang="en" default="">
  </video>
</div>

<div class="video-container" data-video-type="audio-described">
    <video preload="metadata" data-youtube-id="1rBwxGMT9ZM" width="450">
    <track src="../cc/keyboard_ad-en.vtt" label="Captions" kind="captions" srclang="en" default="">
    <track src="../cc/keyboard_ad_desc-en.vtt" label="Descriptions" kind="descriptions" srclang="en" default="">
  </video>
</div>

<p><button id="audio_description_button"><svg aria-hidden="true" class="icon-audio-description "><use xlink:href="/assets/images/icons.svg#icon-audio-description"></use></svg> <span>Enable Audio Description</span></button></p>

<script src="/assets/ableplayer/thirdparty/modernizr.custom.js"></script>
<script src="/assets/scripts/jquery.min.js"></script>
<script src="/assets/ableplayer/thirdparty/js.cookie.js"></script>
<script src="/assets/ableplayer/build/ableplayer.min.js"></script>
<script>
    var youTubeDataAPIKey = "";
    var googleApiReady = false;

    function initGoogleClientApi() {
        googleApiReady = true;
    }
</script>
<script src="http://apis.google.com/js/client.js?onload=initGoogleClientApi"></script>
<script>
    (function() {
        'use strict';
        var player1 = new AblePlayer($('[data-video-type=""] video'));
        var player2 = new AblePlayer($('[data-video-type="audio-described"] video'));

        function addclass(el, className) {
            if (el.classList) {
                el.classList.add(className);
            } else {
                if (!hasclass(el, className)) {
                    el.className += ' ' + className;
                }
            }
        }

        function removeclass(el, className) {
            if (el.classList) {
                el.classList.remove(className);
            } else {
                el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
            }
        }

        function hasclass(el, className) {
            if (el.classList) {
                return el.classList.contains(className);
            } else {
                return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
            }
        }
        var audiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');
        Array.prototype.forEach.call(audiodescribed, function(el, i) {
            el.setAttribute('hidden', true);
        });
        var adbutton = document.querySelector('#audio_description_button');
        adbutton.addEventListener('click', function(e) {
            $('[data-video-type] iframe').attr('width', '450').attr('height', '253');
            player1.pauseMedia();
            player2.pauseMedia();
            if (e.target.getAttribute('data-status') == "audio-described") {
                var videos = document.querySelectorAll('.video-container');
                Array.prototype.forEach.call(videos, function(el, i) {
                    el.removeAttribute("hidden");
                });
                var nonaudiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');
                Array.prototype.forEach.call(nonaudiodescribed, function(el, i) {
                    el.setAttribute('hidden', true);
                });
                e.target.setAttribute('data-status', 'non-audio-described');
                e.target.querySelector('span').innerHTML = 'Enable Audio Description';
            } else {
                var videos = document.querySelectorAll('.video-container');
                Array.prototype.forEach.call(videos, function(el, i) {
                    el.setAttribute('hidden', true);
                });
                var nonaudiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');
                Array.prototype.forEach.call(nonaudiodescribed, function(el, i) {
                    el.removeAttribute("hidden");
                });
                e.target.setAttribute('data-status', 'audio-described');
                e.target.querySelector('span').innerHTML = 'Disable Audio Description';
            }
        });
    }());
</script>


        <div class="video-container" data-video-type="">
  <video preload="metadata" data-youtube-id="93UgG72os8M" width="450">
    <track src="../cc/keyboard-en.vtt" label="Captions" kind="captions" srclang="en" default="">
  </video>
</div>

<div class="video-container" data-video-type="audio-described">
  <video preload="metadata" data-youtube-id="1rBwxGMT9ZM" width="450">
    <track src="../cc/keyboard_ad-en.vtt" label="Captions" kind="captions" srclang="en" default="">
    <track src="../cc/keyboard_ad_desc-en.vtt" label="Descriptions" kind="descriptions" srclang="en" default="">
  </video>
</div>

<p><button id="audio_description_button"><svg aria-hidden="true" class="icon-audio-description "><use xlink:href="/assets/images/icons.svg#icon-audio-description"></use></svg> <span>Enable Audio Description</span></button></p>

<script src="/assets/ableplayer/thirdparty/modernizr.custom.js"></script>
<script src="/assets/scripts/jquery.min.js"></script>
<script src="/assets/ableplayer/thirdparty/js.cookie.js"></script>
<script src="/assets/ableplayer/build/ableplayer.min.js"></script>
<script>
  var youTubeDataAPIKey = "{{site.ytapi}}";
  var googleApiReady = false;
  function initGoogleClientApi() {
    googleApiReady = true;
  }
</script>
<script src="http://apis.google.com/js/client.js?onload=initGoogleClientApi"></script>
<script>
(function () {
  'use strict';

  var player1 = new AblePlayer($('[data-video-type=""] video'));
  var player2 = new AblePlayer($('[data-video-type="audio-described"] video'));

  function addclass(el, className) {
    if (el.classList) {
      el.classList.add(className);
    } else {
      if(! hasclass(el, className)){
        el.className += ' ' + className;
      }
    }
  }

  function removeclass(el, className) {
    if (el.classList) {
      el.classList.remove(className);
    } else {
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    }
  }

  function hasclass(el, className) {
    if (el.classList) {
      return el.classList.contains(className);
    } else {
      return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
    }
  }

  var audiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');

  Array.prototype.forEach.call(audiodescribed, function(el, i){
    el.setAttribute('hidden', true);
  });

  var adbutton = document.querySelector('#audio_description_button');
  adbutton.addEventListener('click', function(e){
    $('[data-video-type] iframe').attr('width', '450').attr('height', '253');
    player1.pauseMedia();
    player2.pauseMedia();
    if (e.target.getAttribute('data-status') == "audio-described") {
      var videos = document.querySelectorAll('.video-container');
      Array.prototype.forEach.call(videos, function(el, i){
        el.removeAttribute("hidden");
      });
      var nonaudiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');
      Array.prototype.forEach.call(nonaudiodescribed, function(el, i){
        el.setAttribute('hidden', true);
      });
      e.target.setAttribute('data-status', 'non-audio-described');
      e.target.querySelector('span').innerHTML = 'Enable Audio Description';
    } else {
      var videos = document.querySelectorAll('.video-container');
      Array.prototype.forEach.call(videos, function(el, i){
        el.setAttribute('hidden', true);
      });
      var nonaudiodescribed = document.querySelectorAll('[data-video-type="audio-described"]');
      Array.prototype.forEach.call(nonaudiodescribed, function(el, i){
        el.removeAttribute("hidden");
      });
      e.target.setAttribute('data-status', 'audio-described');
      e.target.querySelector('span').innerHTML = 'Disable Audio Description';
    }
  });

}());
</script>


        
            
            /* No context defined for this component. */

File:

Content:


                                /*
  Able Player core styles

  Default z-index map:

  * Modal dialog
  div.able-modal-dialog = 10000
  div.able-modal-overlay = 9500

  * Items that should always be on top (9000):
  #able-vts = 9400
  .able-alert = 9400
  .able-window-toolbar .able-button-handler-preferences = 9300
  .able-popup = 9200
  .able-volume-head = 9175
  .able-volume-slider = 9150
  .able-tooltip = 9000

  * Pop-ups with critical content:  (7000 - 8000):
  .able-sign-window = 8000
  .able-transcript-area = 7000

  * Player controls: (5000 - 6000)
  .able-controller .able-seekbar = 6900
  .able-controller .buttonOff = 6800
  .able-controller button > img = 6700
  .able-controller button > span = 6700
  .able-controller button = 6600
  .able-big-play-button = 6500
  div.able-captions-wrapper = 6000
  .able-seekbar-head = 5500
  .able-seekbar-played = 5200
  .able-seekbar-loaded = 5100
  .able = 5000
*/
.able-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  box-sizing: content-box !important;
  max-width: none !important;
}
.able {
  position: relative;
  margin: 1em 0;
  width: 100%; /* will be changed dynamically as player is contructed */
  z-index: 5000;
}
.able-column-left {
    float: inline-start;
}
.able-column-right {
    float: inline-start;
}
.able .able-vidcap-container {
  background-color: black;
  /* height: 360px; */
  left: 0;
  margin: 0;
  position: relative;
  top: 0;
}
.able-player {
  font-family: inherit;
  background-color: #262626; /* background color of player (appears on top & bottom) */
}
.able-offscreen {
  position:absolute;
  left:-10000px;
  &:dir(rtl) {
    right: -10000px;
    left: auto;
  }
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.able-media-container audio {
  display: none !important;
}
.able-video {
}
.able-video .able-now-playing {
  display: none; /* not currently used for video */
}
.able-controller {
  position: relative;
  border-block-start: 2px solid #4c4c4c;
  border-block-end: 2px solid #4c4c4c;
  background-color: #464646; /* background color of controller bar */
  min-height: 38px; /* height of button (20px) + 4px border + 4px padding */
  padding: 0;
}
.able-poster {
  position: absolute;
  top: 0;
  left: 0;
}

/*
  Controller Buttons & Controls
*/
.able-big-play-button {
    position: absolute;
    font-size: 8em;
    opacity: 0.5;
    filter:alpha(opacity=50); /* for IE */
    color: #fdfdfd;
    background-color: transparent;
    border: none;
    outline: none;
    left: 0;
    top: 0;
    padding: 0;
    z-index: 6500;
}
.able-big-play-button:hover {
    opacity: 100;
    filter:alpha(opacity=100); /* for IE */
}
.able-left-controls, .able-right-controls {
    overflow: visible;
}
.able-left-controls button, .able-right-controls button {
    vertical-align: middle;
}
.able-left-controls {
  float: inline-start;
}
.able-right-controls {
  float: inline-end;
}
.able-black-controls,
.able-black-controls button,
.able-black-controls label  {
  color: #000 !important;
}
.able-black-controls .able-seekbar {
  border: 2px solid #000;
}
.able-white-controls,
.able-white-controls button,
.able-black-controls label {
  color: #FFF !important;
}
.able-white-controls .able-seekbar {
  border: 2px solid #FFF;
}
.able-controller button {
  background: none;
  position: relative;
  display: inline-block;
  border-style: none;
  margin: 3px;
  padding: 0;
  font-size: 20px;
  min-width: 24px;
  outline: 2px solid #464646; /* same color as .able-controller background-color */
  border: none;
  overflow: visible !important;
  z-index: 6600;
}
.able-controller button > span,
.able-controller button > img {
  width: 20px;
  margin: 0 auto;
  padding: 0;
  z-index: 6700;
}
.able-controller .buttonOff {
  opacity: 0.5;
  filter:alpha(opacity=50); /* for IE */
  z-index: 6800;
}
.able-controller .able-seekbar {
  margin: 0 5px;
  z-index: 6900;
}
.able-controller button:hover,
.able-controller button:focus {
  outline-style: solid;
  outline-width: medium;
}
.able-controller button:hover {
  outline-color: #8AB839 !important; /* green */
}
.able-controller button:focus {
  outline-color: #ffbb37 !important; /* yellow */
}

/*
  Seekbar
*/
.able-seekbar-wrapper {
  display: inline-block;
  vertical-align: middle;
}
.able-seekbar {
  position: relative;
  height: 0.5em;
  border: 1px solid;
  background-color: #000000;
  margin: 0 3px;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
}
.able-seekbar-loaded {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: 0.5em;
  background-color: #464646;
  z-index: 5100;
}
.able-seekbar-played {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: 0.5em;
  background-color: #DADADA;
  z-index: 5200;
}
.able-seekbar-head {
  display: inline-block;
  position: relative;
  left: 0;
  top: -0.45em;
  background-color: #FDFDFD;
  width: 0.8em;
  height: 0.8em;
  border: 1px solid;
  border-radius: 0.8em;
  z-index: 5500;
}

/*
  Volume Slider
*/
.able-volume-slider {
  width: 34px;
  height: 50px;
  background-color: #464646; /* same as .able-controller */
  padding: 10px 0;
  position: absolute;
  right: 0px;
  top: -74px;
  display: block;
  z-index: 9100;
}
.able-volume-track {
  display: block;
  position: relative;
  height: 100%; /* = 50px after padding */
  width: 5px;
  margin: 0 auto;
  background-color: #999;
}
.able-volume-track.able-volume-track-on {
  background-color: #dadada;
  position: absolute;
  height: 20px; /* change dynamically; 5px per volume tick */
  top: 30px;  /* change dynamically; 50px - height */
}
.able-volume-head {
  display: inline-block;
  background-color: #fdfdfd;
  outline: 1px solid #333;
  position: absolute;
  height: 7px;
  width: 15px;
  left: -5px;
  top: 23px; /* change dynamically; .able-volume-track-on top - 7 */
  z-index: 9175;
}
.able-volume-head:hover,
.able-volume-head:focus {
  background-color: #ffbb37 !important; /* yellow */
}
.able-volume-help { /* not visible; used in aria-describedby */
  display: none;
}

/*
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-block-start: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}
*/

/*
  Status Bar
*/

.able-status-bar {
  height: 1.5em;
  min-height: 1.5em;
  color: #CCC;
  font-size: 0.9em;
  background-color: transparent;
  padding: 0.5em 0.5em 0.25em;
}
.able-status-bar span.able-timer {
  /* contains both span.elapsedTime and span.duration */
  text-align: start;
  float: inline-start;
  width: 32%;
}
.able-status-bar span.able-speed {
  float: inline-start;
  width: 33%;
  text-align: center;
}
.able-status {
  font-style: italic;
  float: inline-end;
  width: 32%;
  text-align :right;
}

/*
  Captions and Descriptions
*/

div.able-captions-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 1.35em;
  display: block;
  z-index: 6000;
}
div.able-captions {
  display: none;
  padding: 0.15em 0.25em;
  /* settings that are overridden by user prefs */
  background-color: black;
  font-size: 1.1em;
  color: white;
  opacity: 0.75;
}
div.able-captions-overlay {
  position: absolute;
  margin: 0;
  bottom: 0;
}
div.able-captions-below {
  position: relative;
  min-height: 2.8em;
}
div.able-descriptions {
  position: relative;
  color: #FF6; /* yellow, to differentiate it from captions */
  background-color: #262626;
  min-height: 2.8em;
  border-block-start: 1px solid #666;
  margin: 0;
  padding: 3%;
  width: 94%;
  text-align: center;
}

/*
  Now Playing
*/

div.able-now-playing {
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  color: #FFFFFF;
  background-color: transparent;
  padding: 0.5em 0.5em 1em;
}
div.able-now-playing span {
  font-size: 0.9em;
}
div.able-now-playing span span {
  display: block;
}

/*
  Modal Dialogs
*/

div.able-modal-dialog {
  position: absolute;
  height: auto;
  max-width: 90%;
  margin-inline-start: auto;
  margin-inline-end: auto;
  left: 0px;
  right: 0px;
  outline: 0px none;
  display: none;
  color: #000;
  background-color: #FAFAFA;
  box-sizing: content-box !important;
  z-index: 10000;
}
div.able-modal-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  display: none;
  z-index: 9500;
}
button.modalCloseButton {
  position: absolute;
  top: 5px;
  right: 5px;
}
button.modal-button {
  margin-inline-end: 5px;
}
div.able-modal-dialog input:hover,
div.able-modal-dialog input:focus,
div.able-modal-dialog button:hover,
div.able-modal-dialog button:focus {
  outline-style: solid;
  outline-width: 2px;
}
div.able-modal-dialog input:hover,
div.able-modal-dialog button:hover {
  outline-color: #8AB839; /* green */
}
div.able-modal-dialog input:focus,
div.able-modal-dialog button:focus {
  outline-color: #ffbb37; /* yellow */
}
div.able-modal-dialog h1 {
  font-weight: bold;
  font-size: 1.8em;
  line-height: 1.2em;
  margin: 0.75em 0;
  color: #000;
  text-align: center;
}
.able-prefs-form,
.able-help-div,
.able-resize-form {
  background-color: #F5F5F5;
  border: medium solid #ccc;
  padding: 0.5em 1em;
  margin: 0 0 0 1em;
  width: 25em;
  display: none;
}

/*
  Preferences Form
*/

.able-prefs-form fieldset {
  margin-inline-start: 0;
  padding-left: 0;
  border: none;
}
.able-prefs-form legend {
  color: black;
  font-weight: bold;
  font-size: 1.1em;
}
.able-prefs-form fieldset div {
  display: table;
  margin-inline-start: 1em;
}
.able-prefs-form fieldset div input {
  display: table-cell;
  width: 1em;
  vertical-align: middle;
}
.able-prefs-form fieldset div label {
  display: table-cell;
  padding-left: 0.5em;
}
fieldset.able-prefs-keys div {
  float: inline-start;
  margin-inline-end: 1em;
}
div.able-desc-pref-prompt {
  font-weight: bold;
  font-style: italic;
  margin-inline-start: 1em !important;
}
div.able-prefDescFormat > div {
  margin-inline-start: 1.5em;
}
.able-prefs-captions label,
.able-prefs-captions select {
  display: block;
  float: inline-start;
  margin-block-end: 0.25em;
}
fieldset.able-prefs-captions label {
  width: 6em;
  text-align: end;
  padding-right: 1em;
}
fieldset.able-prefs-captions select {
  width: 10em;
  font-size: 0.9em;
  border-radius: none;
}
.able-prefs-form div.able-captions-sample {
  padding: 0.5em;
  text-align: center;
}
.able-prefs-form h2 {
  margin-block-start: 0;
  margin-block-end: 0.5em;
  font-size: 1.1em;
}
.able-prefs-form ul {
  margin-block-start: 0;
}

/*
  Keyboard Preferences Dialog
*/
able-prefs-form-keyboard ul {
  list-style-type: none;
}
span.able-modkey-alt,
span.able-modkey-ctrl,
span.able-modkey-shift {
  color: #666;
  font-style: italic;
}
span.able-modkey {
  font-weight: bold;
  color: #000;
  font-size: 1.1em;
}

/*
  Resize Window Dialog
*/

.able-resize-form h1 {
  font-size: 1.15em;
}
.able-resize-form div div {
  margin: 1em;
}
.able-resize-form label {
  padding-right: 0.5em;
  font-weight: bold;
}
.able-resize-form input[type="text"] {
  font-size: 1em;
}
.able-resize-form input[readonly] {
  color: #AAA;
}

/*
  Drag & Drop
*/

.able-window-toolbar {
  background-color: #464646;
  min-height: 15px;
  padding: 10px;
  border-style: solid;
  border-width: 0 0 1px 0;
}
.able-draggable:hover {
  cursor: move;
}
.able-window-toolbar .able-button-handler-preferences {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.5em;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  z-index: 9300;
}
.able-window-toolbar .able-button-handler-preferences:hover,
.able-window-toolbar .able-button-handler-preferences:focus {
  outline-style: solid;
  outline-width: medium;
}
.able-window-toolbar .able-button-handler-preferences:hover {
  outline-color: #8AB839 !important; /* green */
}
.able-window-toolbar .able-button-handler-preferences:focus {
  outline-color: #ffbb37 !important; /* yellow */
}
.able-window-toolbar .able-popup {
  position: absolute;
  cursor: default;
  right: 0;
  top: 0;
  display: block;
}
.able-drag {
  border: 2px dashed #F90;
  cursor: move;
}
.able-resizable {
  position: absolute;
  width: 16px;
  height: 16px;
  padding: 5px 0 0 5px;
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
  background: transparent bottom right url('../ableplayer/images/wingrip.png') no-repeat;
}

/*
  Sign Language Window
*/

.able-sign-window {
  position: relative;
  margin: 1em;
  /* max-width: 100%; */
  z-index: 8000;
}
.able-sign-window video {
  width: 100%;
}
.able-sign-window:focus {
  outline: none;
}


/*
  External chapters div
*/
div.able-chapters-div {
  padding: 0;
}
div.able-chapters-div .able-chapters-heading {
  margin: 1em 0.75em;
  font-size: 1.1em;
  font-weight: bold;
}
div.able-chapters-div ul {
  list-style-type: none;
  padding-left: 0;
}
div.able-chapters-div ul li {
  max-width: 100%;
  padding: 0;
  height: 2em;
}
div.able-chapters-div button {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  color: #000;
  font-size: 1em;
  text-align: start;
  padding: 0.15em 1em;
}
div.able-chapters-div li.able-current-chapter {
  background-color: #000 !important;
}
div.able-chapters-div li.able-current-chapter button {
  color: #FFF !important;
}
div.able-chapters-div li.able-focus {
  background-color: #4C4C4C;
}
div.able-chapters-div button:focus,
div.able-chapters-div button:hover,
div.able-chapters-div button::-moz-focus-inner {
  border: 0;
  outline: none;
  color: #FFF !important;
}

/*
  Fullscreen settings
  In v2.2.4b commented out :-webkit-full-screen style
  This was causing the toolbar in fullscreen mode to be positioned slightly offscreen in webkit browsers
  Safari had an additional problem in window height was being calculated (see event.js > onWindowResize())
  Commenting out this style appears have no adverse effect in any browser
  All other fullscreen styles were already commented out, and left here solely for reference
*/
/*
:-webkit-full-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: none;
}
:-moz-full-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 20;
  background: none;
}

:-ms-fullscreen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: none;
}

:fullscreen {
  position: fixed;
  width: 100%;
  height: 80%;
  top: 0;
  background: none;
}
*/

/*
  Tooltips & Alerts
*/

.able-tooltip, .able-alert {
  position: absolute;
  padding: 5px 10px;
  border-color: black;
  border-width: 1px;
  color: #000 !important;
  background-color: #CCCCCC;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: block;
}
.able-alert {
  background-color: #FFFFCC;
  box-shadow: 0px 0px 16px #262626;
  z-index: 9400;
}
.able-popup {
  z-index: 9200;
}
.able-tooltip {
  z-index: 9000;
}

/*
  Popup Menus
*/
.able-popup {
  position: absolute;
  margin: 0;
  padding: 0;
  border-color: black;
  border-width: 1px;
  background-color: #000;
  opacity: 0.85;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: block;
  cursor: default;
  list-style: none;
}
ul.able-popup {
  list-style-type: none;
}
.able-popup li {
  padding: 0.25em 1em 0.25em 0.25em;
  margin: 1px;
  color: #FFF;
}
.able-popup li.able-focus {
  background-color: #CCC;
  color: #000;
}
.able-popup-captions li {
  padding-left: 1em;
}
.able-popup-captions li[aria-checked="true"] {
  padding-left: 0;
}
.able-popup-captions li[aria-checked="true"]::before {
  content: "\2713  "; /* check mark; for heavier mark us 2714 */
}

/*
  Transcript
*/

.able-transcript-area {
  border-width: 1px;
  border-style: solid;
  height: 400px;
  z-index: 7000;
  outline: none;
  padding-bottom: 25px; /* keep content above 16x16px drag icon */
  background-color: #FFF;
}
.able-transcript {
  position: relative; /* must be positioned for scrolling */
  overflow-y: scroll;
  padding-left: 5%;
  padding-right: 5%;
  /* width: 90%; */
  background-color: #FFF;
  height: 350px;
}
.able-transcript div {
  margin: 1em 0;
}
.able-transcript-heading {
  font-size: 1.4em;
  font-weight: bold;
}
.able-transcript-chapter-heading {
  font-size: 1.2em;
  font-weight: bold;
}
.able-transcript div.able-transcript-desc {
  background-color: #FEE;
  border: thin solid #336;
  font-style: italic;
  padding: 1em;
}
.able-transcript .able-unspoken {
  font-weight: bold;
}
.able-transcript .able-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
.able-highlight {
  background: #FF6; /* light yellow */
}
.able-previous {
  background: black !important;
  font-style: italic;
}
.able-transcript span:hover,
.able-transcript span:focus,
.able-transcript span:active {
  background: #CF6; /* light green */
  cursor: pointer;
}
.able-window-toolbar label {
  margin-inline-end: 10px;
  color: #FFF;
}
.able-window-toolbar input:focus,
.able-window-toolbar input:hover,
.able-window-toolbar select:focus,
.able-window-toolbar select:hover,
.able-controller input:focus,
.able-controller input:hover,
.able-controller button:focus,
.able-controller button:hover,
.able-seekbar-head:focus,
.able-seekbar-head:hover {
  outline-style: solid;
  outline-width: 2px;
}
.able-window-toolbar input:focus,
.able-window-toolbar select:focus,
.able-controller input:focus,
.able-controller button:focus,
.able-seekbar-head:focus {
  outline-color: #ffbb37; /* yellow */
}
.able-window-toolbar input:hover,
.able-window-toolbar select:hover,
.able-controller input:hover,
.able-controller button:hover,
.able-seekbar-head:hover {
  outline-color: #8AB839; /* green */
}
.able-window-toolbar .transcript-language-select-wrapper {
  float: inline-end;
  padding-right: 30px;
}

/*
  Playlist (both audio and video)
*/

.able-playlist {
  list-style-type: none;
  margin: 0;
  background-color: #FFFFFF;
  padding: 5px 0;
}
.able-playlist li {
  background-color: #DDDDDD; /* default background color of each item in playlist */
  margin: 5px;
  padding: 0;
  border: 2px solid #AAA;
  border-radius: 5px;
  -moz-border-radius: 5px;
}
.able-playlist li button {
  border: none;
  color: #000000;
  background-color: transparent;
  font-size: 1em;
  width: 100%;
  padding: 5px 10px;
  text-align: left;
}
.able-playlist li button:hover,
.able-playlist li button:focus,
.able-playlist li button:active { /* playlist items when they have mouse or keyboard focus */
  background-color: #FFEEB3;
  color: #000000;
  text-decoration: none;
  outline: none;
}
.able-playlist li button::-moz-focus-inner {
  border: 0;
}
.able-playlist li button img {
 width: 100px;
 float: left;
 margin-right: 10px;
}
.able-playlist li.able-current { /* currently selected playlist item */
  background-color: #340449;
  border-color: #230330;
}
.able-playlist li.able-current button {
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  outline: none;
}
.able-playlist li.able-current button:hover,
.able-playlist li.able-current button:focus,
.able-playlist li.able-current button:active   {
  color: #000000;
}

/*
  Search
*/

.able-search-results ul li {
  font-size: 1.1em;
  margin-block-end: 1em;
}
.able-search-results-time {
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}
.able-search-results-time:hover,
.able-search-results-time:focus,
.able-search-results-time:active {
  color: #FFF;
  background-color: #000;
  text-decoration: none;
}
.able-search-results-text {
  padding-left: 1em;
}
.able-search-term {
  background-color: #FFC;
  font-weight: bold;
}

/*
  Video Transcript Sorter (VTS)
*/
#able-vts-instructions {
  margin-bottom: 1.5em;
  padding: 1em;
  border: 1px solid #999;
  width: 720px;
  max-width: 90%;
}
#able-vts fieldset {
  margin: 1em;
  border: none;
}
#able-vts fieldset legend {
  color: #000;
  font-weight: bold;
}
#able-vts fieldset div {
  float: inline-start;
  padding-right: 1em;
}
#able-vts table {
  clear: inline-start;
}

#able-vts table,
#able-vts table th,
#able-vts table td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0.5em 0.75em;
}
#able-vts table th.actions {
  min-width: 140px;
}
#able-vts table td button {
  width: auto;
  padding: 0;
  margin: 2px;
}
#able-vts table td button svg {
  width: 16px;
  height: 16px;
}
#able-vts table button:hover,
#able-vts table button:focus  {
  /*    border: 3px solid #66c2ff; */
}
#able-vts table button:hover svg {
  fill: #C00;
}
tr.kind-chapters,
tr.kind-subtitles {
  background-color: #FFF;
}
tr.kind-descriptions {
  background-color: #FEE;
}
tr.kind-chapters {
  background-color: #e6ffe6;
}
.able-vts-dragging {
  background-color: #FFC;
}
div#able-vts-icon-credit {
  margin: 1em;
}
div#able-vts-alert {
  display: none;
  position: fixed;
  top: 5px;
  left: 5px;
  border: 2px solid #666;
  background-color: #FFC;
  padding: 1em;
  font-weight: bold;
  z-index: 9400;
}
button#able-vts-save {
  font-size: 1em;
  padding: 0.25em;
  border-radius: 5px;
  margin-bottom: 1em;
  font-weight: bold;
}
button#able-vts-save:hover,
button#able-vts-save:focus {
  color: white;
  background-color: #060;
}
.able-vts-output-instructions {
  width: 720px;
  max-width: 90%;
}
#able-vts textarea {
  height: 200px;
  width: 720px;
  max-width: 90%;
}

/*
  Misc
*/

.able-clipped, .able-screenreader-alert {
  /* hide from sighted users, but not screen reader users */
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  /* additional rules are needed to ensure clipped buttons are truly invisible in Safari on Mac OS X */
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.able-error {
  display: block;
  background: #ffc;
  border: 2px solid #000;
  color: #FF0000;
  margin: 0.75em;
  padding: 0.5em;
}
.able-fallback {
  display: block;
  text-align: center;
  border: 2px solid #333355;
  background-color: #EEE;
  color: #000;
  font-weight: bold;
  font-size: 1.1em;
  padding: 1em;
  margin-block-end: 1em;
  max-width: 500px;
  width: 95%;
}
.able-fallback div,
.able-fallback ul,
.able-fallback p {
  text-align: start;
}
.able-fallback li  {
  font-weight: normal;
}
.able-fallback img {
  width: 90%;
  margin: 1em auto;
  opacity: 0.3;
}
.able-fallback img.able-poster {
  position: relative;
}

/*
  SVG Icons
*/
button svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}


/*
  icomoon.io font styling
*/
@font-face {
  font-family: 'able';
    src:    url('../ableplayer/button-icons/fonts/able.eot?dqripi');
    src:    url('../ableplayer/button-icons/fonts/able.eot?dqripi#iefix') format('embedded-opentype'),
        url('../ableplayer/button-icons/fonts/able.ttf?dqripi') format('truetype'),
        url('../ableplayer/button-icons/fonts/able.woff?dqripi') format('woff'),
        url('../ableplayer/button-icons/fonts/able.svg?dqripi#able') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'able' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play:before {
    content: "\f04b";
}
.icon-pause:before {
    content: "\f04c";
}
.icon-stop:before {
    content: "\f04d";
}
.icon-restart:before {
    content: "\e900";
}
.icon-rewind:before {
    content: "\e603";
}
.icon-forward:before {
    content: "\e604";
}
.icon-previous:before {
    content: "\e901";
}
.icon-next:before {
    content: "\e902";
}
.icon-slower:before {
    content: "\f0dd";
}
.icon-faster:before {
    content: "\f0de";
}
.icon-turtle:before {
    content: "\e904";
}
.icon-rabbit:before {
    content: "\e905";
}
.icon-ellipsis:before {
    content: "\e903";
}
.icon-pipe:before {
    content: "\e600";
}
.icon-captions:before {
    content: "\e601";
}
.icon-descriptions:before {
    content: "\e602";
}
.icon-sign:before {
    content: "\e60a";
}
.icon-volume-mute:before {
    content: "\e606";
}
.icon-volume-soft:before {
    content: "\e60c";
}
.icon-volume-medium:before {
    content: "\e605";
}
.icon-volume-loud:before {
    content: "\e60b";
}
.icon-volume-up:before {
    content: "\e607";
}
.icon-volume-down:before {
    content: "\e608";
}
.icon-chapters:before {
    content: "\e609";
}
.icon-transcript:before {
    content: "\f15c";
}
.icon-preferences:before {
    content: "\e60d";
}
.icon-close:before {
    content: "\f00d";
}
.icon-fullscreen-expand:before {
    content: "\f065";
}
.icon-fullscreen-collapse:before {
    content: "\f066";
}
.icon-help:before {
    content: "\f128";
}

URL: /components/raw/video/video.css
Filesystem Path: components/video/video.css
Size: 26.7 KB

Handle: @video
Preview:
- With layout
- Component only
Filesystem Path: components/video/video.html

There are no notes for this item.

Video

Images

Input Types

Header

Wrapper