WAI Website Assets

Video Links: Inline 

<a href="…" class="video-link video-link-inline">
  <img src="../../assets/images/video-still-accessibility-intro-16-9.jpg" alt="">
  <span>Video Title</span>
</a>
 
<a href="…" class="video-link{% for c in class %} video-link-{{ c }}{% endfor %}">
  <img src="{{ "/assets/images/video-still-accessibility-intro-16-9.jpg" | path }}" alt="">
  <span>Video Title</span>
</a>
 
{
  "class": [
    "inline"
  ]
}
  • Content: 
    .video-link {
  display: inline-block;
  text-decoration: none;
  margin: 10px 0;
  & img {
    mask: url("../images/video-mask-16-9.svg");
    mask-size: contain;
    width: 240px;
  }
  &.ratio-43 img {
    mask: url("../images/video-mask-4-3.svg");
  }
  & span {
    display: block;
    text-align: center;
    text-decoration: underline;
  }
}

.video-link-small img {
  width: 120px;
}

.video-link-inline {
  display: inline-flex;
  align-items: center;
  & img {
    width: auto;
    height: 2em;
    margin-inline-end: 1em;
  }
  span {
    text-align: start;
  }
}
  • URL: /components/raw/video-links/video-links.css
  • Filesystem Path: components/video-links/video-links.css
  • Size: 574 Bytes

Usage with the wai-website-theme:

{% include video-link.html title="…" href="…" src="…" [ratio="16:9"] %}
  • title: Text underneath the image.
  • href: Link destination.
  • src: Image source.
  • (optional) [ratio]: Specify 16:9 for 16:9 format (default), or 4:3 for 4:3 format.