Materialize CSS Media

Materialize CSS Media is used to deal with images and videos.It provides .responsive-img & .responsive-video classes that are used to make image and video responsive correspondingly.

Followings are the predefined Materialize media 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.

Image Style

Images can be styled by following ways.

Responsive Images
Circular Images

Responsive Images

To make an image responsive, add the .responsive-img class to the <img> element base class. This class sets the image max-width: 100% and height: auto properties.

General Syntax

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

Try It Now

Source Code

     
      <img class="responsive-img" src="../code-support/images/bootstrap/bird.jpg" alt="responsive image" width="250" height="250">

Try it yourself

Source Code : Output

Circular images

To make a circular image, assign the .circle class to the <img> element base class.

General Syntax

    <img src="..." class="circle" alt="Circular Image">

Try It Now

Source Code

     
      <img src="../code-support/images/bootstrap/bird.jpg" class="circle" alt="Circular Image" height="300" width="300">

Try it yourself

Source Code : Output

Responsive Embeds

To create an embedded video responsively, add the embedded video inside the <video> element and assign the .video-container class.

General Syntax

    <div class="video-container">
     <iframe src=".." frameborder="0" allowfullscreen></iframe>
</div>

Try It Now

Source Code

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

Try it yourself

Source Code : Output

Responsive Videos

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

General Syntax

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

Try It Now

Source Code

     
      <div class="container">
  <div class="row center-align">
    <video class="responsive-video" controls>
      <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
     </video>
 </div>
</div>

Try it yourself

Source Code : Output

Conclusion

Materialize CSS media classes are very useful to make image and video responsive. The responsive-img & video-container classes are used to make an image & video responsive correspondingly while responsive-video class is used to make HTML5 video responsive.

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS