College of Business Style Guide

Video Listing 

<section class="video-list" role="region" aria-label="video list section">
    <div class="video_box-item">
        <div class="video_box-video video">
            <iframe src="https://www.youtube.com/embed/tAcVUkNZJSk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="video_box-content">
            <h3>CARES Act-Robert Duquette</h3>
            <p>I'm taking over my body. Back in control, no more shotty. I bet a lot of me was lost. T's uncrossed and I's undotted. I fought it a lot and it seems a lot. Like flesh is all I got. Not any more, flesh out the door?</p>
        </div>
    </div><!-- end video_box-item -->
    <div class="video_box-item">
        <div class="video_box-video video">
            <iframe src="https://www.youtube.com/embed/LmG1XXnHaLs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="video_box-content">
            <h3>Financing options-Brett Smith</h3>
            <p>I'm taking over my body. Back in control, no more shotty. I bet a lot of me was lost. T's uncrossed and I's undotted. I fought it a lot and it seems a lot. Like flesh is all I got. Not any more, flesh out the door?</p>
        </div>
    </div><!-- end video_box-item -->
</section>
 
<section class="video-list" role="region" aria-label="video list section">
  {% block cms_override %}
    {% for video_item in video_items %}
      {% include "@video_box" with {
        youtube_src: video_item.youtube_src,
        headline: video_item.headline,
        content: video_item.content
      } %}
    {% endfor %}
  {% endblock cms_override %}
</section>
 
{
  "video_items": {
    "1": {
      "youtube_src": "https://www.youtube.com/embed/tAcVUkNZJSk",
      "headline": "CARES Act-Robert Duquette",
      "content": "I'm taking over my body. Back in control, no more shotty. I bet a lot of me was lost. T's uncrossed and I's undotted. I fought it a lot and it seems a lot. Like flesh is all I got. Not any more, flesh out the door?"
    },
    "2": {
      "youtube_src": "https://www.youtube.com/embed/LmG1XXnHaLs",
      "headline": "Financing options-Brett Smith",
      "content": "I'm taking over my body. Back in control, no more shotty. I bet a lot of me was lost. T's uncrossed and I's undotted. I fought it a lot and it seems a lot. Like flesh is all I got. Not any more, flesh out the door?"
    }
  }
}
  • Content: 
    .video-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  @media screen and (min-width: $break-desktop) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .video_box-item {
    max-width: inherit;
    justify-content: space-between;
    margin: $space;
    width: 80vw;

    @media screen and (min-width: $break-desktop) {
      max-width: 40vw;
      width: 100%;
    }
  }
}
  • URL: /components/raw/video_listing/video_listing.scss
  • Filesystem Path: components/03-sections/27-video_listing/video_listing.scss
  • Size: 462 Bytes

No notes defined.