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
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
Reference: https://picturepan2.github.io/spectre/elements/media.html#media-video
Last Updated :
07 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...