Spectre Media
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" >w3wiki</ h1 > < strong >SPECTRE Media</ strong > < br >< br > < figure class = "figure" > < img class = "img-responsive" src = "https://media.w3wiki.net/wp-content/uploads/20220121175934/gfg2-297x300.jpg" alt = "w3wiki" width = "400px" > < figcaption class = "figure-caption text-center" > GeekWeek </ figcaption > </ figure > </ center > </ body > </ html > |
Output:
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" >w3wiki</ h1 > < strong >SPECTRE Media Video</ strong > < br >< br > < div > < video class = "video-responsive video-responsive-16-9" controls> < source src = "https://media.w3wiki.net/wp-content/uploads/20190616234019/Canvas.move_.mp4" type = "video/mp4" > Your browser does not support the video tag. </ video > </ div > </ center > </ body > </ html > |
Output:
Reference: https://picturepan2.github.io/spectre/elements/media.html
Contact Us