The Spectre Media component includes responsive images, figures, and video classes. There are three categories in Spectre media, the Spectre Media Image is used to make the image responsive, we need to add the img-responsive class to <img> elements. The Spectre Media Figure is used to make the element <figure> for an image with a caption, and the Spectre Media Video is used to manipulate the video ratio for that we have to use other classes. The default ratio is 16:9. One can insert any YouTube, Youku or another iframe/embed video inside the container.
Spectre Media Types:
- Spectre Media Image: This class is used to make the image responsive.
- Spectre Media Figure: This class is used to give the image a caption.
- Spectre Media Video: It class is used to manipulate the video ration.
<figure class="figure"> <img src="..." class="img-responsive" alt="..."> <video class="video-responsive "> ... </video> </figure>
The below example illustrates the Spectre Media:
Example 1: In this example we will use Media image and figure.
Example 2: In this example, we will use Spectre Media video.