Materialize CSS Media

by Online Tutorials Library July 14, 2022

Materialize CSS Media

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

responsive-img: It is used to make an image to resize itself based on the screen size.

video-container: It is used for responsive container having embedded videos.

responsive-video: It is used to make HTML5 videos responsive.

Example

Let’s take an example to demonstrate images, embedded videos and responsive videos In Materialize CSS Media.

 <!DOCTYPE html> <html>    <head>       <title>The Materialize CSS Example</title>       <meta name = “viewport” content = “width = device-width, initial-scale = 1”>             <link rel = “stylesheet”          href=”https://fonts.googleapis.com/icon?family=Material+Icons”>       <link rel = “stylesheet”          href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>       <script type = “text/javascript”          src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                  <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>       </script>                 </head>        <body class = “container”>        <h2>Materialize CSS Media Examples</h2>              <hr/>       <h3>Images Demo</h3>       <div class = “card-panel”> <img src=”https://tutoraspire.com/oprweb/good-morning.jpg” alt=”Good Morning Friends”/>         </div>              <div class = “card-panel”> <img src=”https://tutoraspire.com/oprweb/good-morning.jpg” alt=”Good Morning Friends”/>          </div>        <h3>Responsive Embeded Video Demo</h3>       <div class = “video-container”>          <iframe width = “540” height = “200”             src = “https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0”             frameborder = “0” allowfullscreen></iframe>       </div>              <div class = “video-container”>          <video  width = “300” height = “200” controls>             <source src = “movie.mp4” type = “video/mp4” />             Your browser does not support the video element.          </video>       </div>    </body> </html> 

Test it Now

Next Topicmaterialize CSS Shadows

Materialize CSS Media

Materialize CSS Media

Sticky Notes for Ubuntu

Azure Portal Overview

You may also like