feat: add a class parameter (#28)

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;
+}

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
 --------------
 

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