幽灵媒体视频

Spectre Media 元素包括响应式图像和视频。在本文中，我们将讨论视频媒体。为了使视频响应，我们需要将视频响应类添加到

幽灵媒体视频课程：

video-responsive：此类用于使嵌入的视频响应。
video-responsive-4-3：该类用于设置视频比例为 4:3。
video-responsive-1-1：该类用于设置视频比例为 1:1。

句法：

以下示例说明了 Spectre 媒体视频：

示例 1：在此示例中，我们将使用 video 标签。

HTML



 

    SPECTRE Media Class
    
    
    
    

 

    
        GeeksforGeeks
        SPECTRE Media Video

HTML



 

    SPECTRE Media Class
    
    
    
    

 

    
        GeeksforGeeks
        SPECTRE Media Video

输出：

幽灵媒体视频

示例 2：在此示例中，我们将使用标记。</p><div class="responsive-tabs"><h2 class="tabtitle"> HTML </h2><div class="tabcontent"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-css" data-lang="CSS"><code class="replace"><!DOCTYPE html> <html> <head> <title>SPECTRE Media Class</title> <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">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">