DOTD Component Library

Video 

<div class="o-video">
      <video>
          <source src="/images/video-01.mp4" type="video/mp4">
      </video>
      <figcaption class="o-caption">
          Caption
      </figcaption>
  </div>
 
{% set base_class = video.base_class|default('o-video') %}
{% if video.src %}
  <div class="{{ bem(base_class, video.element, video.modifiers, video.extra) }}">
    <video {{ attributes(video.attributes) }}>
      <source src="{{ video.src }}" type="video/mp4">
    </video>
    {% include "@caption" with video %}
  </div>
{% endif %}
 
{
  "video": {
    "src": "/images/video-01.mp4",
    "caption": {
      "text": "Caption"
    }
  }
}
  • Content: 
    /* ------------------------------------*\
  $VIDEOS
\*------------------------------------ */

.o-video {
  position: relative;

  video {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}
  • URL: /components/raw/video/_video.scss
  • Filesystem Path: components/01-atoms/video/_video.scss
  • Size: 187 Bytes

No notes defined.