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.
<!DOCTYPE html>
<html>
<head>
<title>SPECTRE Media Class</title>
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/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"
width="320" height="240"
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>
Output:
Example 2: In this example, we will use the <iframe> tag.
<!DOCTYPE html>
<html>
<head>
<title>SPECTRE Media Class</title>
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css@0.5.9/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>
<di class="video-responsive">
<iframe src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
height="200"
width="400">
</iframe>
</div>
</center>
</body>
</html>
Output:
Reference: https://picturepan2.github.io/spectre/elements/media.html#media-video