Materialize CSS Media

Materialize CSS media provides different classes that are used to make images and videos responsive with respect to different viewport widths.

Materialize media provides different classes that are used to create an image and video responsive.

Media Classes:
.responsive-img − Used to make image responsive.
.video-container − used to make embedded videos responsive.
.responsive-video-used to make HTML5 videos responsive.

Responsive Images

To make responsive image, assign .responsive-img to the <img> element base class. It sets max-width: 100% and height: auto for the image.

General Syntax

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

Try it now

Source Code

          <div class="container">
  <img class="responsive-img" src="https://picsum.photos/seed/picsum/200/300" alt="responsive image" />
</div>

Try it now

Source Code: Output

Circular images

To make circular image assign, .circle and to make it responsive assign an alternative class .img-responsive to the <img> element base class.

General Syntax

      <img src="../images/materialize-circle.jpg" class="responsive-img circle" alt="Image Circle">

Try it now

Source Code

          <div class="container">
   <img src="https://picsum.photos/seed/picsum/200/200" class="responsive-img circle" alt="Image Circle"> 
</div>

Try it now

Source Code: Output

Responsive Embeds

To make embedded video responsive, place the embedded video inside <video> element and assign it .video-container class.

General Syntax

      <div class="video-container"></div>

Try it now

Source Code

          <div class="row">
  <div class="video-container">
    <iframe width="854" height="480" src="https://www.youtube.com/embed/cQzien5H2Do" 
    frameborder="0" allowfullscreen></iframe>
  </div>
</div>

Try it now

Source Code: Output

Responsive Videos

To make HTML 5 video responsive, just assign HTML video inside the <video> element and assign it .responsive-video class.

General Syntax

      <video class="responsive-video" controls></video>

Try it now

Source Code

          <div class="row center-align">
  <video class="responsive-video" controls>
    <source src="../images/html5-video.mp4" type="video/mp4" />
  </video>
</div>

Try it now

Source Code: Output

Materialize CSS Media

Responsive Images

Circular images

Responsive Embeds

Responsive Videos

Web Tutorials