Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
<div class="midwest-video " style="--video-aspect-ratio: 16/9">
  <iframe class="w-full h-auto video-embed" title="YouTube video player" 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>
1
2
3
4
5
6
7
8
<%= midwest_video(
  url: params[:url].presence || "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
  title: params[:title].presence,
  controls: params[:controls] != "false",
  autoplay: params[:autoplay] == "true",
  loop: params[:loop] == "true",
  muted: params[:muted] == "true"
) %>

Playground

Embed a video from YouTube, Vimeo, or a direct URL. The title option is used as the accessible label for embedded iframes.

Param Description Input

YouTube, Vimeo, or direct video URL

Accessible title for the embedded video

Show native video controls (direct provider only)

Autoplay the video (direct provider only)

Loop the video (direct provider only)

Mute the video (direct provider only)

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

Accessibility

Figma embed for Video/playground

Annotate a preview to embed its Figma design here:

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