Embed

<!-- Default -->
<div class="embed">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/roS6oFjCDhc" frameborder="0" allowfullscreen></iframe>
</div>

<!-- 16 9 -->
<div class="embed embed-16:9">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/roS6oFjCDhc" frameborder="0" allowfullscreen></iframe>
</div>

<!-- 4 3 -->
<div class="embed embed-4:3">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/roS6oFjCDhc" frameborder="0" allowfullscreen></iframe>
</div>

<!-- 3 2 -->
<div class="embed embed-3:2">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/roS6oFjCDhc" frameborder="0" allowfullscreen></iframe>
</div>

<!-- 6 2 -->
<div class="embed embed-6:2">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/roS6oFjCDhc" frameborder="0" allowfullscreen></iframe>
</div>

<!-- Responsive 6 2 Md View -->
<div class="embed embed-6:2@md">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/roS6oFjCDhc" frameborder="0" allowfullscreen></iframe>
</div>

<div class="embed{{#if modifier }} embed-{{ modifier }}{{/if}}">
  <iframe width="560" height="315" src="{{ videoUrl }}" frameborder="0" allowfullscreen></iframe>
</div>
/* Default */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc"
}

/* 16 9 */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "modifier": "16:9"
}

/* 4 3 */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "modifier": "4:3"
}

/* 3 2 */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "modifier": "3:2"
}

/* 6 2 */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "modifier": "6:2"
}

/* Responsive 6 2 Md View */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "modifier": "6:2@md"
}

There are no notes for this item.