Skip to content
Related Articles
Open in App
Not now

Related Articles

Spectre Media

Improve Article
Save Article
  • Last Updated : 21 Feb, 2022
Improve Article
Save Article

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:

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=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <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=
                alt="geeksforgeeks"
                width="400px">
            <figcaption class="figure-caption text-center">
                GeekWeek
            </figcaption>
        </figure>
    </center>
</body>
  
</html>


Output:

Spectre Media

Spectre Media

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <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=
                type="video/mp4">
                    Your browser does not 
                    support the video tag.
            </video>
        </div>
    </center>
</body>
  
</html>


Output:

Spectre Media

Spectre Media

Reference: https://picturepan2.github.io/spectre/elements/media.html


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!