Styleguide

Video

Sizes

Video preview
Play button
Video preview
Play button
Video preview
Play button
Video preview
Play button
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--3by1
    %a{"aria-label" => "Watch video in new tab", href: "//youtu.be/DHK7Ms23je4", rel: "noreferrer", target: "_blank"}
      %img.flex-embed__content{alt: "Video preview", src: "https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg"}/
      .flex-embed__overlay--container
        %img{alt: "Play button", src: "/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg"}/
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--2by1
    %a{"aria-label" => "Watch video in new tab", href: "//youtu.be/DHK7Ms23je4", rel: "noreferrer", target: "_blank"}
      %img.flex-embed__content{alt: "Video preview", src: "https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg"}/
      .flex-embed__overlay--container
        %img{alt: "Play button", src: "/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg"}/
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--16by9
    %a{"aria-label" => "Watch video in new tab", href: "//youtu.be/DHK7Ms23je4", rel: "noreferrer", target: "_blank"}
      %img.flex-embed__content{alt: "Video preview", src: "https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg"}/
      .flex-embed__overlay--container
        %img{alt: "Play button", src: "/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg"}/
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--4by3
    %a{"aria-label" => "Watch video in new tab", href: "//youtu.be/DHK7Ms23je4", rel: "noreferrer", target: "_blank"}
      %img.flex-embed__content{alt: "Video preview", src: "https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg"}/
      .flex-embed__overlay--container
        %img{alt: "Play button", src: "/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg"}/
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--3by1'><a href="//youtu.be/DHK7Ms23je4" aria-label="Watch video in new tab" rel="noreferrer" target="_blank"><img src="https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg" class="flex-embed__content" alt="Video preview"></img>
    <div class="flex-embed__overlay--container"><img src="/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg" alt="Play button"></img></div>
</a></div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--2by1'><a href="//youtu.be/DHK7Ms23je4" aria-label="Watch video in new tab" rel="noreferrer" target="_blank"><img src="https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg" class="flex-embed__content" alt="Video preview"></img>
    <div class="flex-embed__overlay--container"><img src="/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg" alt="Play button"></img></div>
</a></div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--16by9'><a href="//youtu.be/DHK7Ms23je4" aria-label="Watch video in new tab" rel="noreferrer" target="_blank"><img src="https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg" class="flex-embed__content" alt="Video preview"></img>
    <div class="flex-embed__overlay--container"><img src="/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg" alt="Play button"></img></div>
</a></div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--4by3'><a href="//youtu.be/DHK7Ms23je4" aria-label="Watch video in new tab" rel="noreferrer" target="_blank"><img src="https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg" class="flex-embed__content" alt="Video preview"></img>
    <div class="flex-embed__overlay--container"><img src="/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg" alt="Play button"></img></div>
</a></div>
</div>
= ui_component 'flex_embed', ratio: '3x1', src: '//youtu.be/DHK7Ms23je4'
= ui_component 'flex_embed', ratio: '2x1', src: '//youtu.be/DHK7Ms23je4'
= ui_component 'flex_embed', ratio: '16x9', src: '//youtu.be/DHK7Ms23je4'
= ui_component 'flex_embed', ratio: '4x3', src: '//youtu.be/DHK7Ms23je4'

Custom Video Tag

Video preview
Play button
Video preview
Play button
Video preview
Play button
Video preview
Play button
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--3by1
    %a{"aria-label" => "Watch video in new tab", href: "https://youtu.be/DHK7Ms23je4", rel: "noreferrer", target: "_blank"}
      %img.flex-embed__content{alt: "Video preview", src: "https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg"}/
      .flex-embed__overlay--container
        %img{alt: "Play button", src: "/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg"}/
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--2by1
    %a{"aria-label" => "Watch video in new tab", href: "https://youtu.be/DHK7Ms23je4", rel: "noreferrer", target: "_blank"}
      %img.flex-embed__content{alt: "Video preview", src: "https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg"}/
      .flex-embed__overlay--container
        %img{alt: "Play button", src: "/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg"}/
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--16by9
    %a{"aria-label" => "Watch video in new tab", href: "https://youtu.be/DHK7Ms23je4", rel: "noreferrer", target: "_blank"}
      %img.flex-embed__content{alt: "Video preview", src: "https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg"}/
      .flex-embed__overlay--container
        %img{alt: "Play button", src: "/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg"}/
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--4by3
    %a{"aria-label" => "Watch video in new tab", href: "https://youtu.be/DHK7Ms23je4", rel: "noreferrer", target: "_blank"}
      %img.flex-embed__content{alt: "Video preview", src: "https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg"}/
      .flex-embed__overlay--container
        %img{alt: "Play button", src: "/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg"}/
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--3by1'><a href="https://youtu.be/DHK7Ms23je4" aria-label="Watch video in new tab" rel="noreferrer" target="_blank"><img src="https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg" class="flex-embed__content" alt="Video preview"></img>
    <div class="flex-embed__overlay--container"><img src="/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg" alt="Play button"></img></div>
</a></div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--2by1'><a href="https://youtu.be/DHK7Ms23je4" aria-label="Watch video in new tab" rel="noreferrer" target="_blank"><img src="https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg" class="flex-embed__content" alt="Video preview"></img>
    <div class="flex-embed__overlay--container"><img src="/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg" alt="Play button"></img></div>
</a></div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--16by9'><a href="https://youtu.be/DHK7Ms23je4" aria-label="Watch video in new tab" rel="noreferrer" target="_blank"><img src="https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg" class="flex-embed__content" alt="Video preview"></img>
    <div class="flex-embed__overlay--container"><img src="/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg" alt="Play button"></img></div>
</a></div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--4by3'><a href="https://youtu.be/DHK7Ms23je4" aria-label="Watch video in new tab" rel="noreferrer" target="_blank"><img src="https://img.youtube.com/vi/DHK7Ms23je4/maxresdefault.jpg" class="flex-embed__content" alt="Video preview"></img>
    <div class="flex-embed__overlay--container"><img src="/assets/play_circle-bcc90c4bbcf46e10aa51b50967fb2de5b48e6fe649ddc331679a5eca3056eafd.svg" alt="Play button"></img></div>
</a></div>
</div>
= ui_component 'flex_embed', ratio: '3x1' do
  = video_embed('https://youtu.be/DHK7Ms23je4', class: 'flex-embed__content')
= ui_component 'flex_embed', ratio: '2x1' do
  = video_embed('https://youtu.be/DHK7Ms23je4', class: 'flex-embed__content')
= ui_component 'flex_embed', ratio: '16x9' do
  = video_embed('https://youtu.be/DHK7Ms23je4', class: 'flex-embed__content')
= ui_component 'flex_embed', ratio: '4x3' do
  = video_embed('https://youtu.be/DHK7Ms23je4', class: 'flex-embed__content')