# Media Styles

> Responsive images and videos ready to be seen on many devices.

## Images

Images can be styled in different ways using Expressive.

### Responsive Images

To make images resize responsively to page width, you can add the class `responsive-img` to your image tag. It will now have a `max-width: 100%`, `height: auto`, and 12px corners.

![A wide landscape that shrinks with the container](https://picsum.photos/id/1015/1200/480)

```
<img class="responsive-img" src="cool_pic.jpg">
```

### Circular images

This is a square image. Add the `circle` class to it to make it appear circular.

To make images appear circular, simply add `class="circle"` to them.

```
<div class="s12 m8 offset-m2 l6 offset-l3">
  <article>
    <div class="row valign-wrapper">
      <div class="s2">
        <img src="portrait.jpg" alt="" class="circle responsive-img">
      </div>
      <div class="s10">
        <span>
          This is a square image. Add the "circle" class to it to make it appear circular.
        </span>
      </div>
    </div>
  </div>
</div>
```

## Videos

We provide a container for embedded videos that resizes them responsively.

### Responsive Embeds

To make your embeds responsive, wrap them with a containing div which has the class `video-container`. The container clips the iframe to the same 12px corners.

```
<div class="video-container">
  <iframe src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" allowfullscreen></iframe>
</div>
```

### Responsive Videos

To make your HTML5 videos responsive just add the class `responsive-video` to the video tag. Same 12px corners as `responsive-img`.

```
<video class="responsive-video" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
```