Materialize - Media

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

  • responsive-img − It makes an image to resize itself based on the screen size.

  • video-container − For responsive container having embedded videos.

  • responsive-video − Makes HTML5 videos responsive.


<!DOCTYPE html>
      <title>The Materialize Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="">
         <link rel="stylesheet" href="">
         <script type="text/javascript" src=""></script>
         <script src=""></script>
   <body class="container">
      <h2>Materialize Media Examples</h2>
      <h3>Images Demo</h3>
      <div class="card-panel">
         <img src="html5-mini-logo.jpg" alt="" class="responsive-img">
      <div class="card-panel">
         <img src="html5-mini-logo.jpg" alt="" class="circle responsive-img">
      <h3>Responsive Embeded Video Demo</h3>
      <div class="video-container"> 
         <iframe width="540" height="200" src="" frameborder="0" allowfullscreen></iframe>
      <div class="video-container">
         <video width="300" height="200" controls autoplay>
            <source src="" type="video/ogg" />
            <source src="" type="video/mp4" />
            Your browser does not support the video element.


Verify the output.

Materialize Utilities

Materialize Utilities