Skip to main content

Main Content

Media

SCSS Source: core/src/scss/components/media/_media.scss

Twig Source: core/src/templates/components/media/media.twig

Description

A media element, e.g., image, videos, embedded videos (eg., YouTube and Vimeo), audio, etc., with the option of including a caption and a link. To constrain the aspect ratio of the media element, add classes e.g., su-aspect-ratio--1x1 to the .su-media__wrapper container, or use the mixin @aspect-ratio to set custom aspect ratio on the .su-media__wrapper container. The default .su-media component takes custom HTML for the media content such as an iframe, e.g., YouTube embeds.

Default Style
Caption Cat ipsum dolor sit amet, sweet beast and see owner , run in terror for howl uncontrollably for no reason a nice warm laptop for me to sit on. Prance along on top of the garden fence, annoy the neighbor's dog.

Example Markup

<figure class="su-media [ modifier_class ]">
  <a rel="noopener" href="https://stanford.edu">
    <div class="su-media__wrapper ">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/tZ2GZhND7s0" frameborder="0" allowfullscreen=""></iframe>
    </div>
  </a>
  <figcaption class="su-media__caption">
    Caption
    <strong>Cat ipsum</strong>
    dolor sit amet,
    <a href="#">sweet beast and see owner</a>
    , run in terror for howl
    <em>uncontrollably</em>
    for no reason a nice warm laptop for me to sit on. Prance along on top of the garden fence, annoy the neighbor's dog.
  </figcaption>
</figure>

Style Variants

.su-media--image

Image

Caption Cat ipsum dolor sit amet, sweet beast and see owner, run in terror for howl uncontrollably for no reason a nice warm laptop for me to sit on. Prance along on top of the garden fence, annoy the neighbor's dog.

Example Markup

<figure class="su-media su-media--image">
  <a rel="noopener" href="https://stanford.edu">
    <div class="su-media__wrapper ">
      <img src="https://placeimg.com/2000/1333/any" autoplay="" loop="" muted="" />
    </div>
  </a>
  <figcaption class="su-media__caption">
    Caption
    <strong>Cat ipsum</strong>
    dolor sit amet,
    <a href="#">sweet beast and see owner</a>
    , run in terror for howl
    <em>uncontrollably</em>
    for no reason a nice warm laptop for me to sit on. Prance along on top of the garden fence, annoy the neighbor's dog.
  </figcaption>
</figure>

.su-media--video

HTML5 video

Caption Cat ipsum dolor sit amet, sweet beast and see owner, run in terror for howl uncontrollably for no reason a nice warm laptop for me to sit on. Prance along on top of the garden fence, annoy the neighbor's dog.

Example Markup

<figure class="su-media su-media--video">
  <a rel="noopener" href="https://stanford.edu">
    <div class="su-media__wrapper ">
      <video autoplay="" loop="" muted="">
        <source src="https://news-media.stanford.edu/wp-content/uploads/2018/01/18153719/palau_swimmerloop_final.mp4" type="video/mp4" />
        <p>Sorry, your browser doesn't support HTML5 videos.</p>
      </video>
    </div>
  </a>
  <figcaption class="su-media__caption">
    Caption
    <strong>Cat ipsum</strong>
    dolor sit amet,
    <a href="#">sweet beast and see owner</a>
    , run in terror for howl
    <em>uncontrollably</em>
    for no reason a nice warm laptop for me to sit on. Prance along on top of the garden fence, annoy the neighbor's dog.
  </figcaption>
</figure>

.su-media--audio

HTML5 audio

Caption Cat ipsum dolor sit amet, sweet beast and see owner, run in terror for howl uncontrollably for no reason a nice warm laptop for me to sit on. Prance along on top of the garden fence, annoy the neighbor's dog.

Example Markup

<figure class="su-media su-media--audio">
  <a rel="noopener" href="https://stanford.edu">
    <div class="su-media__wrapper ">
      <audio autoplay="" loop="" muted="" controls="">
        <source src="https://news-media.stanford.edu/wp-content/uploads/2019/06/27152807/volcano_1.mp3" type="audio/mp3" />
        <p>Sorry, your browser doesn't support HTML5 audio.</p>
      </audio>
    </div>
  </a>
  <figcaption class="su-media__caption">
    Caption
    <strong>Cat ipsum</strong>
    dolor sit amet,
    <a href="#">sweet beast and see owner</a>
    , run in terror for howl
    <em>uncontrollably</em>
    for no reason a nice warm laptop for me to sit on. Prance along on top of the garden fence, annoy the neighbor's dog.
  </figcaption>
</figure>