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;
  }
}

.audio-description {
  text-align: right;
}
  • URL: /components/raw/video/_video.scss
  • Filesystem Path: components/31-molecules/video/_video.scss
  • Size: 358 Bytes