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


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.


View changes
npm i @gov.au/responsive-media
  • Simon Pascal Klein avatar picture
  • Trevor Brennan avatar picture
  • Julian Fleetwood avatar picture
  • Patrick De Young avatar picture
  • Gary Broadbent avatar picture
  • Alex Page avatar picture
  • Dominik Wilkowski 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.


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


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

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.


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