Materialize CSS Media

In this tutorial, you will learn how to make the Materialize media component responsive.

Materialize CSS Media generally refers to media components provided by the Materialize Framework. Materialize is a modern, responsive front-end framework based on material design. It is designed and developed by Google. The framework offers numerous components and utility classes for constructing responsive web applications.

MaterializeCSS Media components include responsive images, videos, and other media elements that adapt to different screen sizes and resolutions. These media components provide help to the developer to create visually appealing and user-friendly interfaces that work well across all the different devices and platforms.

Materialize Responsive Media Classes

There are the following predefined materialize responsive classes.

.responsive-img − It is used to make image responsive.
.video-container − It is used to make embedded videos responsive.
.responsive-video - It is used to make HTML5 videos responsive.

Responsive Image

To make an image responsive in Materialize.CSS, add the responsive-img class to the base class of the <img> element. This class sets the maximum-width of the image to 100% and the height to auto. This ensures that the image will scale down proportionally to the width of the viewport while maintaining its aspect ratio. Whenever a Materialize image is placed within a Materialize grid, it will appear visually appealing on all screen sizes.

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 Image

To create a circular image, simply add the circular class to the image element. Keep in mind that if the height and width of the image are not equal, the resulting shape will be elliptical rather than perfectly circular. Add an additional .img-responsive class to make the circular image responsive.

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

Place the embedded video inside the external container and assign the video-container class to the container. This class makes the embedded video responsive.

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

If you want to make HTML 5 video responsive, then place it inside the <video> element and add the .responsive-video class to the base class of the <video> element.

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

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4