Responsive media

v3.0.0

Responsive media helps create a responsive experience for users viewing images and video on different size devices. Specifically it manages video and slideshow dimensions and aspect ratios for various viewports and widths; that is, small screens, large screens and anything in between.

Released

History
View changes
Install
npm i @gold.au/responsive-media
Tags
Requires
Contributors
  • Patrick De Young avatar picture
  • Dominik Wilkowski avatar picture
  • Simon Pascal Klein avatar picture
  • Trevor Brennan avatar picture
  • Julian Fleetwood avatar picture
  • Alex Page avatar picture
  • Gary Broadbent avatar picture

Responsive image

Use the .au-responsive-media-img class to make an image fill the available space while not exceeding the actual image dimensions.

Example

<img class="au-responsive-media-img" src="#" alt="">

Responsive videos 16:9

Use the .au-responsive-media-vid--16x9 and au-responsive-media-vid__item classes to have an embedded video scale to fit the available space while maintaining a 'widescreen' format.

Example

<div class="au-responsive-media-vid au-responsive-media-vid--16x9">
  <iframe title="responsive video" class="au-responsive-media-vid__item" frameborder="0" src="#"></iframe>
</div>

Responsive videos 4:3

The 4:3 responsive video classes work in the same way as the 16:9 but are made for the 4:3 aspect ratio videos.

Example

<div class="au-responsive-media-vid au-responsive-media-vid--4x3">
  <iframe title="responsive video" class="au-responsive-media-vid__item" frameborder="0" src="#"></iframe>
</div>

Related components

Feedback