Embeds

Default embed

Defaults to 16:9

= ui.nfg :tile_section do
  %h1 Embeds

  %h2 Default embed
  %p Defaults to 16:9
  .row
    .col-8.mx-auto
      = ui.nfg :embed, iframe: 'https://www.youtube.com/embed/zpOULjyy-n8?rel=0'

<div class="tile-section">
  <h1>Embeds</h1>
  <h2>Default embed</h2>
  <p>Defaults to 16:9</p>
  <div class='row'>
    <div class='col-8 mx-auto'>
      <div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" class="embed-responsive-item" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
  </div>
</div>

Embed aspect ratios

= ui.nfg :tile_section do
  %h2 Embed aspect ratios
  = ui.nfg :embed, aspect_ratio: '21:9', iframe: 'https://www.youtube.com/embed/zpOULjyy-n8?rel=0', class: 'mb-3'

<div class="tile-section">
  <h2>Embed aspect ratios</h2>
  <div class="embed-responsive mb-3 embed-responsive-21by9"><iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" class="embed-responsive-item" allowfullscreen="allowfullscreen"></iframe></div>
</div>

Embed aspect ratios

=ui.nfg :tile_section do
  %h2 Embed aspect ratios
  = ui.nfg :embed, aspect_ratio: '16:9', iframe: 'https://www.youtube.com/embed/zpOULjyy-n8?rel=0', class: 'mb-3'

<div class="tile-section">
  <h2>Embed aspect ratios</h2>
  <div class="embed-responsive mb-3 embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" class="embed-responsive-item" allowfullscreen="allowfullscreen"></iframe></div>
</div>

Embed aspect ratios

=ui.nfg :tile_section do
  %h2 Embed aspect ratios
  = ui.nfg :embed, aspect_ratio: '4:3', iframe: 'https://www.youtube.com/embed/zpOULjyy-n8?rel=0', class: 'mb-3'

<div class="tile-section">
  <h2>Embed aspect ratios</h2>
  <div class="embed-responsive mb-3 embed-responsive-4by3"><iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" class="embed-responsive-item" allowfullscreen="allowfullscreen"></iframe></div>
</div>

Block example

= ui.nfg :tile_section do
  %h2 Block example
  = ui.nfg :embed, aspect_ratio: '16:9' do
    %iframe{ src: 'https://www.youtube.com/embed/zpOULjyy-n8?rel=0', class: 'embed-responsive-item' }

<div class="tile-section">
  <h2>Block example</h2>
  <div class="embed-responsive embed-responsive-16by9"><iframe class='embed-responsive-item' src='https://www.youtube.com/embed/zpOULjyy-n8?rel=0'></iframe>
  </div>
</div>

Device preview

The width will need to be set inline on the div with an explicit or percentage width. The best solution would be to have an explicit width with a max-width set as a percentage. It is not within the device styles. Example: style="width: 768px; max-width: 90%;"

Tablet version:

= ui.nfg :tile_section do
  %h6 Tablet version:
  .device-preview.device-preview-tablet.mb-5{ style: 'width:768px;max-width:90%;' }
    = ui.nfg :embed, aspect_ratio: '3:4', class: 'device-screen' do
      %iframe{ src: 'https://getbootstrap.com/' }

<div class="tile-section">
  <h6>Tablet version:</h6>
  <div class='device-preview device-preview-tablet mb-5' style='width:768px;max-width:90%;'>
    <div class="embed-responsive device-screen embed-responsive-3by4"><iframe src='https://getbootstrap.com/'></iframe>
    </div>
  </div>
</div>

Mobile version:

= ui.nfg :tile_section do
  %h6 Mobile version:
  .device-preview.device-preview-mobile.mb-5{ style: 'width:320px;max-width:60%;' }
    = ui.nfg :embed, aspect_ratio: '9:16', class: 'device-screen' do
      %iframe{ src: 'https://getbootstrap.com/' }

<div class="tile-section">
  <h6>Mobile version:</h6>
  <div class='device-preview device-preview-mobile mb-5' style='width:320px;max-width:60%;'>
    <div class="embed-responsive device-screen embed-responsive-9by16"><iframe src='https://getbootstrap.com/'></iframe>
    </div>
  </div>
</div>

Mobile version:

Content inside a device that isn't an iframe.

= ui.nfg :tile_section do
  %h6 Mobile version:
  .device-preview.device-preview-mobile.mb-5{ style: 'width:320px;max-width:60%;' }
    = ui.nfg :embed, aspect_ratio: '9:16', class: 'device-screen' do
      .device-content
        .p-3
          = ui.nfg :typeface, body: "Content inside a device that isn't an iframe.", class: 'mb-0'

<div class="tile-section">
  <h6>Mobile version:</h6>
  <div class='device-preview device-preview-mobile mb-5' style='width:320px;max-width:60%;'>
    <div class="embed-responsive device-screen embed-responsive-9by16">
      <div class='device-content'>
        <div class='p-3'>
          <p class="mb-0">Content inside a device that isn&#39;t an iframe.</p>
        </div>
      </div>
    </div>
  </div>
</div>