<a href="…" class="video-link">
  <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": null
}
  • 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.