City of Ghent Style Guide

Video

When to use this component

Use the video component to embed a video.

Accessibility

  • Captions must be provided in all languages for which the page is available (WCAG 1.2.2), for both prerecorded and live videos (WCAG 1.2.4).
  • Audio description must be provided for prerecorded videos. If the video provider does not support audio description tracks, you must provide a link to an alternative version (WCAG 1.2.5).

Video

<div class="video">
  <div class="responsive-video">
    <iframe width="100%" height="500"
            src="{{ src }}" frameborder="0"
      {% if title %}
        title="{{ title }}"
      {% endif %}
            allow="autoplay; encrypted-media"
            allowfullscreen></iframe>
  </div>
  <div class="audio-description">
    {% if audio_description_src %}
      {% include '@link' with {
        'link': audio_description_src,
        'text': 'Watch this video with audio description',
        'modifier': 'standalone-link',
        'title': null
      } %}
    {% endif %}
  </div>
</div>
<div class="video">
    <div class="responsive-video">
        <iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
    <div class="audio-description">
        <a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
            Watch this video with audio description </a>
    </div>
</div>
{
  "title": "Promofilm stad Gent.",
  "src": "https://www.youtube.com/embed/S0vLmTWUmok",
  "audio_description_src": "https://www.youtube.com/embed/S0vLmTWUmok"
}
  • Content:
    .video {
      @include clearfix;
      width: 100%;
    
      .responsive-video {
        position: relative;
        padding-bottom: calc(100% / (16/9));
    
        iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    
      a {
        margin-top: .4rem;
        margin-bottom: .4rem;
        float: right;
      }
    }
    
  • URL: /components/raw/video/_video.scss
  • Filesystem Path: components/31-molecules/video/_video.scss
  • Size: 331 Bytes