Skip to main content

Main Content

Media

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>