SIA Web Design Library

Hero: Video

No notes defined.

<div class='c-hero c-hero--video'>
    <div class='c-embed c-embed--video c-hero__embed'>
        <div class="o-embed 
                    o-embed--16by9
        ">
            <iframe class="o-embed-item" src="https://www.youtube.com/embed/1hHMwLxN6EM" allowfullscreen=""></iframe>
        </div>
    </div>
</div>
 
<div class='{{ get_component_class( 'hero', display ) }}' {% if image %} style="background-image: url( '{{ image.src }}' );" {% endif %}>
    {% if video %}
        {% include get_template( 'embed', 'unit' ) with video %}
    {% elseif image %}
        <img class='c-hero__image' src='{{ image.src }}' alt='{{ image.alt }}' />
    {% endif %}
</div>
 
{
  "image": null,
  "display": {
    "modifiers": [
      "video"
    ]
  },
  "video": {
    "display": {
      "component": "hero",
      "modifiers": [
        "video"
      ]
    },
    "content": "https://www.youtube.com/embed/1hHMwLxN6EM"
  }
}