College Design Language System

Gallery: Video

Gallery Documentation

Original source from https://utsa-asc.github.io/college-dls/components/detail/gallery–default.html

Implementation Notes

This component is designed to display a collection of images and/or videos in a grid layout. The number of images or videos showing in a row will vary depending the device viewport width.

Media Requirements

  • Gallery Thumbnail Image: Our standard image size is 360px (width) by 200px (height), 72 ppi (pixels per inch) jpeg or png.
    • Image should be no larger than 300kb (kilobytes)
  • Gallery Full-Size Image: Our standard image size is 1200px (width) by 670px (height), 72 ppi (pixels per inch) jpeg or png.
    • Image should be no larger than 300kb (kilobytes)
<div class="container">
    <h2>Video Gallery</h2>
    <div class="row">
        <div class="col-12 col-sm-6 col-md-3 mb-4 video">
            <div class="ratio ratio-16x9">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/3lztWxiJ170" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-3 mb-4 video">
            <div class="ratio ratio-16x9">
                <iframe src="https://utsa.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=85cf16fc-1877-4590-846d-acfd016be013&autoplay=false&offerviewer=true&showtitle=true&showbrand=true&captions=false&interactivity=all" height="405" width="720" style="border: 1px solid #464646;" allowfullscreen allow="autoplay"></iframe>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-3 mb-4 video">
            <div class="ratio ratio-16x9">
                <iframe src="https://player.vimeo.com/video/591889626?h=7e4f6fe329&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-3 mb-0 video">
            <div class="ratio ratio-16x9">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/zpvoYp9osDQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </div>

</div>
  • Content: 
    /* components/03-sections/09-gallery/gallery.scss */
/* BEGIN gallery.scss */

.col-md-3.video {
    position: relative;
}

.fa.fa-play {
    position: absolute;
	width: 0;
	height: 0;
    background-color: rgba(0,0,0,0.6);
    border-radius: 500px;
    padding: 15px 20px;
    color: #fff;
    font-size: 2em;
    margin: 0 auto;
    width: 60px;
    height: 60px;
	top: 25%;
	left: 40%;
}

/* END gallery.scss */
  • URL: /components/raw/gallery/gallery.scss
  • Filesystem Path: components/03-sections/09-gallery/gallery.scss
  • Size: 414 Bytes 
<div class="container">
        <h2>{{ header.text }}</h2>
        <div class="row">
          <div class="col-12 col-sm-6 col-md-3 mb-4 video">
            <div class="ratio ratio-16x9">
              <iframe width="560" height="315" src="https://www.youtube.com/embed/3lztWxiJ170" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-md-3 mb-4 video">
            <div class="ratio ratio-16x9">
              <iframe src="https://utsa.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=85cf16fc-1877-4590-846d-acfd016be013&autoplay=false&offerviewer=true&showtitle=true&showbrand=true&captions=false&interactivity=all" height="405" width="720" style="border: 1px solid #464646;" allowfullscreen allow="autoplay"></iframe>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-md-3 mb-4 video">
            <div class="ratio ratio-16x9">
              <iframe src="https://player.vimeo.com/video/591889626?h=7e4f6fe329&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-md-3 mb-0 video">
            <div class="ratio ratio-16x9">
              <iframe width="560" height="315" src="https://www.youtube.com/embed/zpvoYp9osDQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
          </div>
        </div>
        
      </div>