Open In App

Spectre Media Video

Improve
Improve
Like Article
Like
Save
Share
Report

The Spectre Media element includes responsive images and video. In this article we will discuss about the video media. To make the video responsive we need to add the video-responsive class to <video> elements. We can manipulate the video ration for that we have to use other classes. The default ration is 16:9. You can insert any YouTube, Youku or other iframe/embed video inside the container. 

Spectre Media Video Class:

  • video-responsive: This class is use to make the embedded video responsive.
  • video-responsive-4-3: This class is use to set the video ratio is 4:3.
  • video-responsive-1-1: This class is use to set the video ratio is 1:1.

Syntax:

<video class="video-responsive Spectre-Media-Video-Class">
    <source src="...">
</video> 

Below example illustrate the Spectre Media Video:

Example 1: In this example we will use the video tag.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE Media Class</title>
    <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"
                width="320" height="240"
                controls>
            <source src=
                type="video/mp4">
                    Your browser does not support the video tag.
            </video>
         </div>
     </center>
</body>
 
</html>


Output:

Spectre Media Video

Spectre Media Video

Example 2: In this example, we will use the <iframe> tag.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE Media Class</title>
    <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>
 
        <di class="video-responsive">
            <iframe src=
                height="200"
                width="400">
            </iframe>
        </div>
    </center>
</body>
 
</html>


Output:

Spectre Media Video

Spectre Media Video

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



Last Updated : 07 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads