Materialize Media Materialize provides classes for media content. Here in this tutorial we are going to explain how you can use media classes in Materialize. You can also use our online editor to edit and run the code online.
Materialize Media Example
Images can be styled in following ways-
To create responsive images you need to add the class responsive-img to the image tag which will make image responsive-
Materialize Media | Responsive Images Example:
To make image circular just add circle class to the image tag.
Materialize Media | Image Circle Example:
If you run the above example it will produce output something like this –
You can embed the videos in page using responsive-video and video-container class.
If you want to embed videos such as youtube videos you can embed videos simply as below which will be responsive on all devices.
Materialize Media | Embed Youtube Video Example:
You can make html videos responsive by simply adding the class responsive-video
Materialize Media | Responsive Video Html 5 Example: