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

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

Download

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

Download

<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

Download

<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

Download

<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

Materialize CSS Media

Responsive Images

General Syntax

Source Code

Source Code : Output

Circular images

General Syntax

Source Code

Source Code : Output

Responsive Embeds

General Syntax

Source Code

Source Code : Output

Responsive Videos

General Syntax

Source Code

Source Code : Output

Web Tutorials