/* -----------------------------------------------------------
 * Responsive and Styled Video Embeds
 * ----------------------------------------------------------- */

/* Create a responsive container for embedded videos (e.g., iframes) */
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    /* 16:9 Aspect Ratio */
    padding-bottom: 56.25%; 
    overflow: hidden;

    /* Styling */
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    background-color: #000;
}

/* Position the video iframe or element inside the container */
.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Add a smooth transition for better visual feedback */
.video-container:hover {
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* For MkDocs-video plugin, the plugin generates the iframe directly, so we can't use a parent div.
   Instead, we style the iframe directly if we know its class or can target it. 
   The plugin does not add a class, so you would need to modify the plugin or use a CSS selector.
   For now, we will provide the generic solution. */

/* To apply this to the plugin-generated iframe, you will need to add a wrapper div manually
   or adjust the plugin's template. A common approach is to just use the HTML tag. */

/* Fallback for direct HTML usage */
video, iframe {
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
```
eof

### How to Use

1.  **Save the file:** Save the code above as `extra.css` inside a new folder named `css` within your `docs` directory (e.g., `docs/css/extra.css`).

2.  **Update `mkdocs.yml`:** Add the following line to your `mkdocs.yml` file to link the new stylesheet:

    ```yaml
    extra_css:
      - css/extra.css
    ```

3.  **Wrap your embeds:** Finally, wrap your video embed code in a `<div>` with the class `video-container`.

    For example, if you were using the direct HTML embed method, you would do this:

    ```html
    <div class="video-container">
      <iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen></iframe>
    </div>