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
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
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
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
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>