From aa5ff06adc92c5863a30ee5242fff1b9814eb5f7 Mon Sep 17 00:00:00 2001
From: Pierrick Rambaud <pierrick.rambaud49@gmail.com>
Date: Fri, 28 Apr 2023 08:32:07 +0200
Subject: [PATCH] feat: add a class parameter

---
 docs/_static/custom.css |  5 +++++
 docs/quickstart.rst     | 11 +++++++++++
 sphinxcontrib/video.py  |  4 ++++
 3 files changed, 20 insertions(+)

diff --git a/docs/_static/custom.css b/docs/_static/custom.css
index b287caf..f5184e9 100644
--- a/docs/_static/custom.css
+++ b/docs/_static/custom.css
@@ -9,3 +9,8 @@ div.highlight-console pre span.go::before {
   margin-right: 10px;
   margin-left: 5px;
 }
+
+/* use to demo the class attribute */
+.video-bordered {
+  border: 0.2em solid red;
+}
diff --git a/docs/quickstart.rst b/docs/quickstart.rst
index aaee81a..4425568 100644
--- a/docs/quickstart.rst
+++ b/docs/quickstart.rst
@@ -56,6 +56,7 @@ the video directive supports all the optional attributes from the html tag as su
     ``:poster:``,``str``, Specifies an image url to be shown while the video is downloading, or until the user hits the play button
     ``:preload:``,``str``,"Specifies if and how the author thinks the video should be loaded when the page loads. Can only be values from ``['auto', 'metadata', 'none']``"
     ``:width:``,``int``, Sets the width of the video player in pixels
+    ``:class:``,``str``, Set extra class to the video html tag
 
 They can be used as any directive option:
 
@@ -72,6 +73,16 @@ They can be used as any directive option:
     :muted:
     :loop:
 
+And using the ``:class:`` parameter in combination with custom css, you can change the display of the html ``<video>`` tag:
+
+.. code-block:: rst
+
+    .. video:: _static/video.mp4
+        :class: video-bordered
+
+.. video:: _static/video.mp4
+    :class: video-bordered
+
 Advanced Usage
 --------------
 
diff --git a/sphinxcontrib/video.py b/sphinxcontrib/video.py
index eb8220d..4046cf7 100644
--- a/sphinxcontrib/video.py
+++ b/sphinxcontrib/video.py
@@ -88,6 +88,7 @@ class Video(SphinxDirective):
         "poster": directives.unchanged,
         "preload": directives.unchanged,
         "width": directives.unchanged,
+        "class": directives.unchanged,
     }
 
     def run(self) -> List[video_node]:
@@ -142,6 +143,7 @@ def run(self) -> List[video_node]:
                 poster=self.options.get("poster", ""),
                 preload=preload,
                 width=width,
+                klass=self.options.get("class", ""),
             )
         ]
 
@@ -150,6 +152,8 @@ def visit_video_node_html(translator: SphinxTranslator, node: video_node) -> Non
     """Entry point of the html video node."""
     # start the video block
     attr: List[str] = [f'{k}="{node[k]}"' for k in SUPPORTED_OPTIONS if node[k]]
+    if node["klass"]:  # klass need to be special cased
+        attr += [f"class=\"{node['klass']}\""]
     html: str = f"<video {' '.join(attr)}>"
 
     # build the sources