Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
<div class="max-w-sm">
  <div class="midwest-video " style="--video-aspect-ratio: 4/3">
    <iframe class="w-full h-auto video-embed" title="Demo video" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  </div>
</div>
1
2
3
4
5
6
7
<div class="max-w-sm">
  <%= render Midwest::VideoComponent.new(
        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
        aspect_ratio: params[:aspect_ratio] || '4/3',
        title: 'Demo video'
      ) %>
</div>

Aspect Ratio

Override the default 16/9 aspect ratio with any ratio string. Common values: 16/9, 4/3, 1/1, 9/16.

Param Description Input

CSS aspect-ratio value (e.g. 4/3)

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

Accessibility

Figma embed for Video/aspect_ratio

Annotate a preview to embed its Figma design here:

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