Styleguide

Video

Sizes

.flex-embed
  .flex-embed__ratio.flex-embed__ratio--3by1
    %iframe.flex-embed__content{allowfullscreen: "allowfullscreen", frameborder: "0", height: "300", mozallowfullscreen: "true", src: "//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&controls=0&showinfo=0&rel=0&iv_load_policy=3", webkitallowfullscreen: "true", width: "550"}
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--2by1
    %iframe.flex-embed__content{allowfullscreen: "allowfullscreen", frameborder: "0", height: "300", mozallowfullscreen: "true", src: "//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&controls=0&showinfo=0&rel=0&iv_load_policy=3", webkitallowfullscreen: "true", width: "550"}
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--16by9
    %iframe.flex-embed__content{allowfullscreen: "allowfullscreen", frameborder: "0", height: "300", mozallowfullscreen: "true", src: "//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&controls=0&showinfo=0&rel=0&iv_load_policy=3", webkitallowfullscreen: "true", width: "550"}
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--4by3
    %iframe.flex-embed__content{allowfullscreen: "allowfullscreen", frameborder: "0", height: "300", mozallowfullscreen: "true", src: "//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&controls=0&showinfo=0&rel=0&iv_load_policy=3", webkitallowfullscreen: "true", width: "550"}
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--3by1'><iframe src="//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3" width="550" height="300" class="flex-embed__content" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--2by1'><iframe src="//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3" width="550" height="300" class="flex-embed__content" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--16by9'><iframe src="//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3" width="550" height="300" class="flex-embed__content" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--4by3'><iframe src="//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3" width="550" height="300" class="flex-embed__content" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="allowfullscreen"></iframe></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

.flex-embed
  .flex-embed__ratio.flex-embed__ratio--3by1
    %iframe.flex-embed__content{allowfullscreen: "allowfullscreen", frameborder: "0", height: "300", mozallowfullscreen: "true", src: "//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&controls=0&showinfo=0&rel=0&iv_load_policy=3", webkitallowfullscreen: "true", width: "550"}
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--2by1
    %iframe.flex-embed__content{allowfullscreen: "allowfullscreen", frameborder: "0", height: "300", mozallowfullscreen: "true", src: "//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&controls=0&showinfo=0&rel=0&iv_load_policy=3", webkitallowfullscreen: "true", width: "550"}
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--16by9
    %iframe.flex-embed__content{allowfullscreen: "allowfullscreen", frameborder: "0", height: "300", mozallowfullscreen: "true", src: "//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&controls=0&showinfo=0&rel=0&iv_load_policy=3", webkitallowfullscreen: "true", width: "550"}
.flex-embed
  .flex-embed__ratio.flex-embed__ratio--4by3
    %iframe.flex-embed__content{allowfullscreen: "allowfullscreen", frameborder: "0", height: "300", mozallowfullscreen: "true", src: "//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&controls=0&showinfo=0&rel=0&iv_load_policy=3", webkitallowfullscreen: "true", width: "550"}
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--3by1'><iframe src="//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3" width="550" height="300" class="flex-embed__content" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="allowfullscreen"></iframe>
  </div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--2by1'><iframe src="//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3" width="550" height="300" class="flex-embed__content" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="allowfullscreen"></iframe>
  </div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--16by9'><iframe src="//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3" width="550" height="300" class="flex-embed__content" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="allowfullscreen"></iframe>
  </div>
</div>
<div class='flex-embed'>
  <div class='flex-embed__ratio flex-embed__ratio--4by3'><iframe src="//www.youtube.com/embed/DHK7Ms23je4?feature=oembed&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3" width="550" height="300" class="flex-embed__content" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="allowfullscreen"></iframe>
  </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')