E3 Alliance Pattern Library

Video Component: Default 

<div class="video-component">
    <div class="video-component__video">
        <iframe title="UIUC FROM THE SKY" width="500" height="375" src="https://www.youtube.com/embed/lXbFu91a0t4/?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="video-component__caption">
        Caption of video
    </div>
</div>
 
<div class="video-component">
    <div class="video-component__video">
        {{ component.video.src }}
    </div>
    {% if component.video.caption %}
    <div class="video-component__caption">
        {{ component.video.caption }}
    </div>
    {% endif %}
</div>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "componentSpacing": "large",
  "component": {
    "type": "video",
    "video": {
      "src": "<iframe title=\"UIUC FROM THE SKY\" width=\"500\" height=\"375\" src=\"https://www.youtube.com/embed/lXbFu91a0t4/?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
      "caption": "Caption of video"
    }
  }
}
  • Content: 
    .video-component
    --captionColor #848484

    &__video
        overflow hidden
        position relative
        width 100%

        &::after
            content ''
            display block
            padding-top 56.25%

        & iframe
            height 100%
            left 0
            position absolute
            top 0
            width 100%

    &__caption
        @extends $detail
  • URL: /components/raw/video-component/video-component.styl
  • Filesystem Path: patterns/components/video-component/video-component.styl
  • Size: 398 Bytes

No notes defined.