Various classes are provided by materialize CSS to make media responsive.

Images: Images can be styled in following ways:

Responsive Images: To make images responsive to page width, responsive-img  class is added with image tag.

 <img class="responsive-img" src="image.jpg">

Circular Images: To make image look circular, circle class is added with image tag.

<div class="col s12 m8 offset-m2 l6 offset-l3">
  <div class="card-panel grey lighten-5 z-depth-1">
    <div class="row valign-wrapper">
      <div class="col s2">
        <img src="image.jpg" 
          class="circle responsive-img"> 
      </div>
      <div class="col s10">
        <span class="black-text">
          This is a square image, "circle"
          class is added to it to make it
          appear circular.
        </span>
      </div>
    </div>
  </div>
</div>

Example:

Output:

Video: Materialize CSS provides a container for Embedded Videos that resize responsively.

Responsive Embeds: To make embeds responsive, merely wrap them within div which has the class video-container.

<div class="video-container">
  <iframe width="853" height="480" 
    src="//www.youtube.com" 
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Responsive Videos: To make HTML5 Videos responsive just add the class responsive-video to the video tag.

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

Example:

Output: