Materialize Media

admin

8 years ago

Materialize Media– Materialize provides classes for displaying media content. Here in this tutorial we are going to explain how you can use media classes in MaterializeCSS to manage the media content. You can also use our online editor to edit and run the code online. You can also watch video tutorial for media content tutorial.

Materialize Media Example

Images

Images can be styled in following ways-

Responsive Images

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:

<amp-img class="responsive-img amp-wp-unknown-size amp-wp-enforced-sizes" src="myimage.jpg" width="600" height="400" sizes="(min-width: 600px) 600px, 100vw"></amp-img>

Try it »

Circular Images

To make image circular just add circle class to the image tag.

Materialize Media | Image Circle Example:

<amp-img class="circle responsive-img amp-wp-unknown-size amp-wp-enforced-sizes" src="myimage.jpg" width="600" height="400" sizes="(min-width: 600px) 600px, 100vw"></amp-img>

Try it »

If you run the above example it will produce output something like this –

Videos

You can embed the videos in page using responsive-video and video-container class.

Responsive Embed

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:

<div class="video-container">
        <amp-iframe width="853" height="480" src="https://www.youtube.com/embed/0Pgup2hOpXQ" frameborder="0" allowfullscreen="" sandbox="allow-scripts allow-same-origin" sizes="(min-width: 600px) 600px, 100vw" class="amp-wp-enforced-sizes"><div placeholder="" class="amp-wp-iframe-placeholder"></div></amp-iframe>
      </div>

Try it »

Responsive Videos

You can make html videos responsive by simply adding the class responsive-video

Materialize Media | Responsive Video Html 5 Example:

 <amp-video class="responsive-video" controls="" height="400" layout="fixed-height"><source src="my_movie.mp4" type="video/mp4">
  </source></amp-video>