dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Responsive media

v2.0.11

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 @gov.au/responsive-media
Tags
Requires
Contributors
  • Trevor Brennan avatar picture
  • Alex Page avatar picture
  • Dominik Wilkowski avatar picture
  • Simon Pascal Klein avatar picture
  • Julian Fleetwood avatar picture
  • Patrick De Young 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 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 class="au-responsive-media-vid__item" frameborder="0" src="#"></iframe>
</div>