Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are the classes to create responsive image & video in Materialize?
The Materialize library allows developers to use pre-defined CSS classes and JavaScript methods to make a responsive web design. We can use the Materialize classes to customize the typography, add grids to the web page, and make responsive videos and images.
It is always required to make images and videos responsive to avoid the overflow of them. In this tutorial, we will use different classes of Materialize to make images and videos responsive.
Using the ‘Responsive-img’ class to Make an Image Responsive
The ‘responsive-img’ class of Materialize allows developers to make images responsive. It sets the image's width equal to the container width and height equal to auto. So, the image doesn’t get overflow, but it gets compressed for the smaller screen or blurred for, the larger screens.
Syntax
Users can follow the syntax below to use the ‘responsive-image’ class of materialize to make images responsive.
<img class="responsive-img" src="#" >
In the above syntax, users can see that we require adding a ‘responsive-img’ class to the ‘img’ element itself.
Example 1
In the example below, we have created the ‘container’ div element. In the ‘container’ div element, we added both the image and text.
In CSS, we set the width of the container equal to 60%. Also, we have set the width for the text and image. In the output, users can observe that the image dimensions change according to the screen’s dimensions.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
<style>
.container {
width: 60%;
display: flex;
font-size: 2rem;
}
.text {width: 60%;}
.img {width: 40%;}
</style>
</head>
<body>
<h3> Using the <i> 'responsive-img' </i> class of Materialize to make image responsive </h3>
<div class = "container">
<div class = "img">
<img class = "responsive-img" src = "https://wallpaperaccess.com/full/968120.jpg" alt = "nature image">
</div>
<p class = "text"> Let's start to learn the Materialize. </p>
</div>
</body>
</html>
Example 2
In the example below, we have used the ‘circle’ class to make a rounded image. Also, we have used the ‘responsive-img’ class with the image element and added it inside the ‘container’ element.
In the output, we can see that the circular image is responsive according to the screen size.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
<style>
.container {width: 40%;}
</style>
</head>
<body>
<h4> Using the <i> 'responsive-img' </i> class of Materialize to make image responsive </h4>
<div class = "container ">
<img class = "circle responsive-img" src = "https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg" alt = "Nature image">
</div>
</body>
</html>
Using the ‘Responsive-video’ Class to Make Video Responsive
The ‘responsive-video’ class name is used when we require to make a responsive video. We can use the <video> tag to add a video to the web page. It sets the width equal to 100% for the video and adjusts the height according to the video's aspect ratio.
Syntax
Users can follow the syntax below to use the ‘responsive-video’ class name to make the video responsive.
<video class="responsive-video" style="width: 100%" controls> <source src="testVideo.mp4" type="video/mp4"> </video>
In the above syntax, we have used the ‘responsive-video’ class name with the ‘video’ HTML tag.
Example 3
In the example below, we have added the video tag with the ‘responsive-video’ class name. Also, we have added the ‘source’ tag inside the ‘video’ element. Users can add the video URL as a value of the ‘src’ attribute and observe how the video is responsive.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
</head>
<body>
<h4> Using the <i> 'responsive-video' </i> class of Materialize to make embeded videos responsive </h4>
<video class = "responsive-video" style = "width: 100%" controls>
<source src = "testVideo.mp4" type = "video/mp4">
</video>
</body>
</html>
Using the ‘Video-container’ Class to Make Video Responsive
We can use the ‘video-container’ class name with the container in which we embed the video using the iframe. Basically, it is used for embedded videos. It also sets the width equal to the container element’s width and height according to the aspect ratio of the video.
Syntax
Users can follow the syntax below to use the ‘video-container’ class to make video responsive.
<div class="video-container"> <!—add iframe here --> </div>
In the above syntax, we have added the ‘video-container’ class name to the parent element of the iframe.
Example 4
In the example below, we have embedded the youtube video to the web page using the iframe. We have added the iframe in the div element with the class name ‘video-container’. In the output, we can observe that width of the video is 100%, and it changes according to the screen size.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
</head>
<body>
<h4> Using the <i> 'video-container' </i> class of Materialize to make embeded videos responsive </h4>
<div class = "video-container">
<iframe src="https://www.youtube.com/embed/qZOlCFincuU"
title = "Welcome To Tutorialspoint - Simply Easy Learning" frameborder = "0"
allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen> </iframe>
</div>
</body>
</html>
Users learned to use the different classes of Materialize to make images and videos responsive. However, developers must focus on which element they should use with the particular class name.
75 Views
