Materialize CSS Media, Working with Media in Materialize CSS

Materialize CSS Tutorial

Materialize CSS Media

Materialize CSS Media has several classes to make images and videos responsive to different sizes.

Responsive Images

To make images resize responsively (based on the screen size) to page width, you can add the class responsive-img to your image tag.

<div class="row">
    <div class="center-align">
        <img src="../images/materialize.jpg" class="responsive-img" alt="Responsive Image"> 
    </div>
</div>

Output :

Circular images

To make images appear circular, add class="circle" this class image will be displayed in circular.

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

Output :

Responsive Embeds

To make your embeds responsive, To add video-container this class.

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

Output :

Responsive Videos

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

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

Output :

Materialize CSS Tutorial