Spectre Media

Last Updated : 21 Feb, 2022

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.

Syntax:

<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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
    <style> 
        img { 
            border: 4px solid green; 
            padding: 4px; 
            margin: 4px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <strong>SPECTRE Media</strong> 
        <br><br> 
        <figure class="figure"> 
            <img class="img-responsive"
                src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220121175934/gfg2-297x300.jpg"
                alt="geeksforgeeks"
                width="400px"> 
            <figcaption class="figure-caption text-center"> 
                GeekWeek 
            </figcaption> 
        </figure> 
    </center> 
</body> 
  
</html>

Output:

Spectre Media

Example 2: In this example, we will use Spectre Media video.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
    <style> 
        img { 
            border: 4px solid green; 
            padding: 4px; 
            margin: 4px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <strong>SPECTRE Media Video</strong> 
        <br><br> 
  
        <div> 
            <video class="video-responsive video-responsive-16-9"
                controls> 
            <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
                type="video/mp4"> 
                    Your browser does not  
                    support the video tag. 
            </video> 
        </div> 
    </center> 
</body> 
  
</html>