Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="max-w-lg">
  <div class="midwest-video " style="--video-aspect-ratio: 16/9">
    <video class="w-full h-auto video-embed" controls="controls" preload="auto">
      <track src="/example-captions.vtt" kind="subtitles" srclang="en" label="English" default="default">
    </video>
    
    <details class="video-transcript">
      <summary>Transcript</summary>
      <div class="video-transcript-body">
        0:00 - Introduction
        0:15 - Main topic begins
        1:30 - Conclusion
      </div>
    </details>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="max-w-lg">
  <%= render Midwest::VideoComponent.new(
        caption_src: '/example-captions.vtt',
        caption_label: 'English',
        caption_srclang: 'en'
      ) do |v| %>
    <% v.with_transcript do %>
      0:00 - Introduction
      0:15 - Main topic begins
      1:30 - Conclusion
    <% end %>
  <% end %>
</div>

Captions

For direct <video> embeds, provide a WebVTT caption file via caption_src:. The track is added as a kind="subtitles" track with the default attribute so captions load automatically.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Video/captions

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."