From 1ece344f70e7e0edc13f20d0a209a9e485f96a60 Mon Sep 17 00:00:00 2001
From: berlin2123 <68841407+berlin2123@users.noreply.github.com>
Date: Wed, 27 Mar 2024 00:23:44 +0800
Subject: [PATCH 1/7] align and caption

---
 docs/quickstart.rst    | 15 +++++++++++++++
 sphinxcontrib/video.py | 16 ++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/docs/quickstart.rst b/docs/quickstart.rst
index 4425568..bca69ee 100644
--- a/docs/quickstart.rst
+++ b/docs/quickstart.rst
@@ -57,6 +57,8 @@ the video directive supports all the optional attributes from the html tag as su
     ``: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
+    ``:align:``,``str``, Sets the horizontal alignment ('default', 'left', 'center', 'right')
+    ``:caption:``,``str``, Set the caption text under video
 
 They can be used as any directive option:
 
@@ -83,6 +85,19 @@ And using the ``:class:`` parameter in combination with custom css, you can chan
 .. video:: _static/video.mp4
     :class: video-bordered
 
+alignment and caption
+
+.. code-block:: rst
+
+    .. video:: _static/video.mp4
+        :align: center
+        :caption: The caption text 
+
+.. video:: _static/video.mp4
+    :align: center
+    :caption: The caption text 
+
+
 Advanced Usage
 --------------
 
diff --git a/sphinxcontrib/video.py b/sphinxcontrib/video.py
index c799b7d..c6c4e70 100644
--- a/sphinxcontrib/video.py
+++ b/sphinxcontrib/video.py
@@ -97,6 +97,8 @@ class Video(SphinxDirective):
         "preload": directives.unchanged,
         "width": directives.unchanged,
         "class": directives.unchanged,
+        "align": directives.unchanged,
+        "caption": directives.unchanged,
     }
 
     def run(self) -> List[video_node]:
@@ -150,6 +152,8 @@ def run(self) -> List[video_node]:
                 preload=preload,
                 width=width,
                 klass=self.options.get("class", ""),
+                align=self.options.get("align", ""),
+                caption=self.options.get("caption", ""),
             )
         ]
 
@@ -184,11 +188,16 @@ def run(self):
 
 def visit_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
     """Entry point of the html video node."""
+    # align
+    if node["align"] and (node["align"] in ["left", "center", "right", "default"]):
+        html: str = f"<div class=\"align-{node['align']}\">"
+    else:
+        html: str = f"<div class=\"align-default\">"
     # 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)}>"
+    html += f"<video {' '.join(attr)}>"
 
     # build the sources
     builder = translator.builder
@@ -210,7 +219,10 @@ def visit_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
 
 def depart_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
     """Exit of the html video node."""
-    translator.body.append("</video>")
+    html_caption=f""
+    if node["caption"]:
+        html_caption += f"<p><span class=\"caption-text\">{node['caption']}</span></p>"
+    translator.body.append(f"</video>{html_caption}</div>")
 
 
 def visit_video_node_unsuported(translator: SphinxTranslator, node: video_node) -> None:

From 68fc0dbb82b63414261a12acbe2bf82137eefd09 Mon Sep 17 00:00:00 2001
From: berlin2123 <68841407+berlin2123@users.noreply.github.com>
Date: Wed, 27 Mar 2024 00:49:10 +0800
Subject: [PATCH 2/7] update video.py

---
 sphinxcontrib/video.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sphinxcontrib/video.py b/sphinxcontrib/video.py
index c6c4e70..0ed3d2d 100644
--- a/sphinxcontrib/video.py
+++ b/sphinxcontrib/video.py
@@ -189,7 +189,7 @@ def run(self):
 def visit_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
     """Entry point of the html video node."""
     # align
-    if node["align"] and (node["align"] in ["left", "center", "right", "default"]):
+    if node["align"] and (node["align"] in ["left", "center", "right"]):
         html: str = f"<div class=\"align-{node['align']}\">"
     else:
         html: str = f"<div class=\"align-default\">"
@@ -219,7 +219,7 @@ def visit_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
 
 def depart_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
     """Exit of the html video node."""
-    html_caption=f""
+    html_caption: str = f""
     if node["caption"]:
         html_caption += f"<p><span class=\"caption-text\">{node['caption']}</span></p>"
     translator.body.append(f"</video>{html_caption}</div>")

From 37b49cab27e7c9f32a840060f55f47d4aeec5ae5 Mon Sep 17 00:00:00 2001
From: berlin2123 <68841407+berlin2123@users.noreply.github.com>
Date: Wed, 27 Mar 2024 08:52:26 +0800
Subject: [PATCH 3/7] follow suggestions

---
 docs/quickstart.rst    | 43 +++++++++++++++++++++++++++++++++++++++---
 sphinxcontrib/video.py | 11 ++++-------
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/docs/quickstart.rst b/docs/quickstart.rst
index bca69ee..4b1c7e2 100644
--- a/docs/quickstart.rst
+++ b/docs/quickstart.rst
@@ -85,17 +85,54 @@ And using the ``:class:`` parameter in combination with custom css, you can chan
 .. video:: _static/video.mp4
     :class: video-bordered
 
-alignment and caption
+Alignment: 
+
+.. code-block:: rst
+
+    .. video:: _static/video.mp4
+        :align: left
+
+.. video:: _static/video.mp4
+    :align: left
+
+.. code-block:: rst
+
+    .. video:: _static/video.mp4
+        :align: center
+
+.. video:: _static/video.mp4
+    :align: center
+
+.. code-block:: rst
+
+    .. video:: _static/video.mp4
+        :align: right
+
+.. video:: _static/video.mp4
+    :align: right
+
+For consistency with previous versions, which not support align, the default value of align 'left' when the it is not set.
+If you want to use the 'default' defined by theme, you need to, manually, set it to 'default':
+
+.. code-block:: rst
+
+    .. video:: _static/video.mp4
+        :align: default
+
+.. video:: _static/video.mp4
+    :align: default
+
+ Caption:
 
 .. code-block:: rst
 
     .. video:: _static/video.mp4
         :align: center
-        :caption: The caption text 
+        :caption: The caption text
 
 .. video:: _static/video.mp4
     :align: center
-    :caption: The caption text 
+    :caption: The caption text
 
 
 Advanced Usage
diff --git a/sphinxcontrib/video.py b/sphinxcontrib/video.py
index 0ed3d2d..fd0e576 100644
--- a/sphinxcontrib/video.py
+++ b/sphinxcontrib/video.py
@@ -152,7 +152,7 @@ def run(self) -> List[video_node]:
                 preload=preload,
                 width=width,
                 klass=self.options.get("class", ""),
-                align=self.options.get("align", ""),
+                align=self.options.get("align", "left"),
                 caption=self.options.get("caption", ""),
             )
         ]
@@ -189,10 +189,7 @@ def run(self):
 def visit_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
     """Entry point of the html video node."""
     # align
-    if node["align"] and (node["align"] in ["left", "center", "right"]):
-        html: str = f"<div class=\"align-{node['align']}\">"
-    else:
-        html: str = f"<div class=\"align-default\">"
+    html: str = f'<div class="align-{node["align"]}">'
     # 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
@@ -219,9 +216,9 @@ def visit_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
 
 def depart_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
     """Exit of the html video node."""
-    html_caption: str = f""
+    html_caption: str = ""
     if node["caption"]:
-        html_caption += f"<p><span class=\"caption-text\">{node['caption']}</span></p>"
+        html_caption += f'<p><span class="caption-text">{node["caption"]}</span></p>'
     translator.body.append(f"</video>{html_caption}</div>")
 
 

From 483a9a0b9f034d253d67913cc3ca245f6560e590 Mon Sep 17 00:00:00 2001
From: berlin2123 <68841407+berlin2123@users.noreply.github.com>
Date: Wed, 27 Mar 2024 09:36:04 +0800
Subject: [PATCH 4/7] warning on wrong align

---
 sphinxcontrib/video.py | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/sphinxcontrib/video.py b/sphinxcontrib/video.py
index fd0e576..3ce978d 100644
--- a/sphinxcontrib/video.py
+++ b/sphinxcontrib/video.py
@@ -189,7 +189,14 @@ def run(self):
 def visit_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
     """Entry point of the html video node."""
     # align
-    html: str = f'<div class="align-{node["align"]}">'
+    html: str = ""
+    if (node["align"] in ["left", "center", "right", "default"]):
+        html += f'<div class="align-{node["align"]}">'
+    else:
+        html += f'<div class="align-default">'
+        logger.warning(
+            f'The align type ("{node["align"]}") is not a supported. defaulting to "default"'
+        )
     # 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

From 774eecb8c0f0b9407666926280d9edbc107e353c Mon Sep 17 00:00:00 2001
From: berlin2123 <68841407+berlin2123@users.noreply.github.com>
Date: Wed, 27 Mar 2024 22:28:27 +0800
Subject: [PATCH 5/7] figure style caption and add figwidth

---
 docs/quickstart.rst    | 83 ++++++++++++++++++++++++++++++++++++++++--
 sphinxcontrib/video.py | 47 ++++++++++++++++++------
 2 files changed, 115 insertions(+), 15 deletions(-)

diff --git a/docs/quickstart.rst b/docs/quickstart.rst
index 4b1c7e2..4364b9c 100644
--- a/docs/quickstart.rst
+++ b/docs/quickstart.rst
@@ -51,14 +51,15 @@ the video directive supports all the optional attributes from the html tag as su
     ``:autoplay:``,,Specifies that the video will start playing as soon as it is ready
     ``:nocontrols:``,,Specifies that video controls should not be displayed (such as a play/pause button etc).
     ``:height:``,``int``,Sets the height of the video player in pixels
-    ``:loop:``,,Specifies that the video will start over again, every time it is finished
+    ``:loop:``,,"Specifies that the video will start over again, every time it is finished"
     ``:muted:``,,Specifies that the audio output of the video should be muted
-    ``:poster:``,``str``, Specifies an image url to be shown while the video is downloading, or until the user hits the play button
+    ``: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
-    ``:align:``,``str``, Sets the horizontal alignment ('default', 'left', 'center', 'right')
+    ``:align:``,``str``, "Sets the horizontal alignment. Can only be values from ``['default', 'left', 'center', 'right']``"
     ``:caption:``,``str``, Set the caption text under video
+    ``:figwidth:``,``str``, Set the maximum width of caption text. It is defined as the same of 'figwidth' `in figure <https://docutils.sourceforge.io/docs/ref/rst/directives.html#figure>`_. It will be disabled when 'caption' is not set.
 
 They can be used as any directive option:
 
@@ -122,7 +123,7 @@ If you want to use the 'default' defined by theme, you need to, manually, set it
 .. video:: _static/video.mp4
     :align: default
 
- Caption:
+Caption:
 
 .. code-block:: rst
 
@@ -134,6 +135,80 @@ If you want to use the 'default' defined by theme, you need to, manually, set it
     :align: center
     :caption: The caption text
 
+Use figwidth to set the maximum width of the caption text if the video is narrow:
+
+.. code-block:: rst
+
+    .. video:: _static/video.mp4
+        :width: 300
+        :figwidth: 60%
+        :align: center
+        :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+
+.. video:: _static/video.mp4
+    :width: 300
+    :figwidth: 60%
+    :align: center
+    :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+
+The width of video is not controlled by 'figwidth', you need to use 'width' to control it. For example, if you don't set the 'width', you may have the following problem.
+
+.. code-block:: rst
+
+    .. video:: _static/video.mp4
+        :figwidth: 60%
+        :align: center
+        :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+
+.. video:: _static/video.mp4
+    :figwidth: 60%
+    :align: center
+    :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+
+When 'caption' is set, and 'align' is 'left' or 'right', the video will be float to text in some themes.
+
+.. code-block:: rst
+
+    .. video:: _static/video.mp4
+        :width: 400
+        :figwidth: 60%
+        :align: left
+        :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+    long long text...
+
+.. video:: _static/video.mp4
+    :width: 400
+    :figwidth: 60%
+    :align: left
+    :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+
+.. code-block:: rst
+
+    .. video:: _static/video.mp4
+        :width: 400
+        :figwidth: 60%
+        :align: right
+        :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+    long long text...
+
+.. video:: _static/video.mp4
+    :width: 400
+    :figwidth: 60%
+    :align: right
+    :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+
 
 Advanced Usage
 --------------
diff --git a/sphinxcontrib/video.py b/sphinxcontrib/video.py
index 3ce978d..7ad67f9 100644
--- a/sphinxcontrib/video.py
+++ b/sphinxcontrib/video.py
@@ -99,6 +99,7 @@ class Video(SphinxDirective):
         "class": directives.unchanged,
         "align": directives.unchanged,
         "caption": directives.unchanged,
+        "figwidth": directives.unchanged,
     }
 
     def run(self) -> List[video_node]:
@@ -128,6 +129,18 @@ def run(self) -> List[video_node]:
             )
             preload = "auto"
 
+        align: str = self.options.get("align", "left")
+        if not (align in ["left", "center", "right", "default"]):
+            logger.warning(
+                f'The align type ("{align}") is not a supported. defaulting to "left"'
+            )
+            align = "left"
+
+        caption: str = self.options.get("caption", "")
+        figwidth: str = self.options.get("figwidth", "")
+        if not caption:
+            figwidth = ""
+
         # add the primary video files as images in the builder
         sources = [get_video(self.arguments[0], env)]
 
@@ -152,8 +165,9 @@ def run(self) -> List[video_node]:
                 preload=preload,
                 width=width,
                 klass=self.options.get("class", ""),
-                align=self.options.get("align", "left"),
-                caption=self.options.get("caption", ""),
+                align=align,
+                caption=caption,
+                figwidth=figwidth,
             )
         ]
 
@@ -188,15 +202,19 @@ def run(self):
 
 def visit_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
     """Entry point of the html video node."""
-    # align
     html: str = ""
-    if (node["align"] in ["left", "center", "right", "default"]):
-        html += f'<div class="align-{node["align"]}">'
+    # has caption?
+    if node["caption"]:
+        html += '<figure '
     else:
-        html += f'<div class="align-default">'
-        logger.warning(
-            f'The align type ("{node["align"]}") is not a supported. defaulting to "default"'
-        )
+        html += '<div '
+    # align
+    html += f' class="align-{node["align"]}"'
+    # figwidth
+    if node["figwidth"]:
+        html += f' style="width: {node["figwidth"]}"><div class="align-center">'
+    else:
+        html += '>'
     # 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
@@ -224,9 +242,16 @@ def visit_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
 def depart_video_node_html(translator: HTMLTranslator, node: video_node) -> None:
     """Exit of the html video node."""
     html_caption: str = ""
+    if node["figwidth"]:
+        html_caption += "</div>"
     if node["caption"]:
-        html_caption += f'<p><span class="caption-text">{node["caption"]}</span></p>'
-    translator.body.append(f"</video>{html_caption}</div>")
+        html_caption += ('<figcaption class="align-center">'
+                         '<p style="text-align: left; display:inline-block">'
+                         f'<span class="caption-text">{node["caption"]}</span>'
+                         '</p></figcaption></figure>')
+    else:
+       html_caption += '</div>'
+    translator.body.append(f"</video>{html_caption}")
 
 
 def visit_video_node_unsuported(translator: SphinxTranslator, node: video_node) -> None:

From ca72c6a3d648bdab03b6887ee094d44e9770b17d Mon Sep 17 00:00:00 2001
From: berlin2123 <68841407+berlin2123@users.noreply.github.com>
Date: Thu, 28 Mar 2024 10:38:38 +0800
Subject: [PATCH 6/7] suport of percentage width

---
 docs/quickstart.rst    | 30 ++++++++++++++++++++++++------
 sphinxcontrib/video.py | 14 +++++++++++++-
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/docs/quickstart.rst b/docs/quickstart.rst
index 4364b9c..2908903 100644
--- a/docs/quickstart.rst
+++ b/docs/quickstart.rst
@@ -55,7 +55,7 @@ the video directive supports all the optional attributes from the html tag as su
     ``:muted:``,,Specifies that the audio output of the video should be muted
     ``: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
+    ``:width:``,``int``, Sets the width of the video player in pixels or percentage
     ``:class:``,``str``, Set extra class to the video html tag
     ``:align:``,``str``, "Sets the horizontal alignment. Can only be values from ``['default', 'left', 'center', 'right']``"
     ``:caption:``,``str``, Set the caption text under video
@@ -151,7 +151,7 @@ Use figwidth to set the maximum width of the caption text if the video is narrow
     :align: center
     :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
 
-The width of video is not controlled by 'figwidth', you need to use 'width' to control it. For example, if you don't set the 'width', you may have the following problem.
+The width of video is not controlled by 'figwidth', you need to use 'width' to control it. For example, if you don't set the 'width', the following problems may occur: The video with is greater than 'figwith', resulting in results that are not aligned as expected.
 
 .. code-block:: rst
 
@@ -165,22 +165,39 @@ The width of video is not controlled by 'figwidth', you need to use 'width' to c
     :align: center
     :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
 
+When the 'width' is set to a percentage, the percent number indicates the relative to 'figwidth':
+
+.. code-block:: rst
+
+    .. video:: _static/video.mp4
+        :width: 100%
+        :figwidth: 60%
+        :align: center
+        :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+
+.. video:: _static/video.mp4
+    :width: 100%
+    :figwidth: 60%
+    :align: center
+    :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+
 When 'caption' is set, and 'align' is 'left' or 'right', the video will be float to text in some themes.
 
 .. code-block:: rst
 
     .. video:: _static/video.mp4
-        :width: 400
+        :width: 100%
         :figwidth: 60%
         :align: left
         :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
     long long text...
 
 .. video:: _static/video.mp4
-    :width: 400
+    :width: 100%
     :figwidth: 60%
     :align: left
     :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+
 long long text long long text long long text long long text long long text long long text long long text
 long long text long long text long long text long long text long long text long long text long long text
 long long text long long text long long text long long text long long text long long text long long text
@@ -191,17 +208,18 @@ long long text long long text long long text long long text long long text long
 .. code-block:: rst
 
     .. video:: _static/video.mp4
-        :width: 400
+        :width: 100%
         :figwidth: 60%
         :align: right
         :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
     long long text...
 
 .. video:: _static/video.mp4
-    :width: 400
+    :width: 100%
     :figwidth: 60%
     :align: right
     :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+
 long long text long long text long long text long long text long long text long long text long long text
 long long text long long text long long text long long text long long text long long text long long text
 long long text long long text long long text long long text long long text long long text long long text
diff --git a/sphinxcontrib/video.py b/sphinxcontrib/video.py
index 7ad67f9..7534a20 100644
--- a/sphinxcontrib/video.py
+++ b/sphinxcontrib/video.py
@@ -115,7 +115,7 @@ def run(self) -> List[video_node]:
             height = ""
 
         width: str = self.options.get("width", "")
-        if width and not width.isdigit():
+        if width and not (width.isdigit() or str_is_percentage(width)):
             logger.warning(
                 f'The provided width ("{width}") is ignored as it\'s not an integer'
             )
@@ -172,6 +172,18 @@ def run(self) -> List[video_node]:
         ]
 
 
+def str_is_percentage(string: str) -> bool:
+    return string[-1] == "%" and str_is_float(string[0:-1])
+
+
+def str_is_float(string: str) -> bool:
+    try:
+        float(string)
+        return True
+    except ValueError:
+        return False
+
+
 class VideoPostTransform(SphinxPostTransform):
     """Ensure video files are copied to build directory.
 

From 72802ecafc514c4a7c49fa8316d2692e7e91a1d8 Mon Sep 17 00:00:00 2001
From: berlin2123 <68841407+berlin2123@users.noreply.github.com>
Date: Thu, 28 Mar 2024 11:26:08 +0800
Subject: [PATCH 7/7] update docs

---
 docs/quickstart.rst | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/docs/quickstart.rst b/docs/quickstart.rst
index 2908903..4e01d53 100644
--- a/docs/quickstart.rst
+++ b/docs/quickstart.rst
@@ -173,28 +173,29 @@ When the 'width' is set to a percentage, the percent number indicates the relati
         :width: 100%
         :figwidth: 60%
         :align: center
-        :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+        :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
 
 .. video:: _static/video.mp4
     :width: 100%
     :figwidth: 60%
     :align: center
-    :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+    :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
 
 When 'caption' is set, and 'align' is 'left' or 'right', the video will be float to text in some themes.
 
 .. code-block:: rst
 
     .. video:: _static/video.mp4
-        :width: 100%
-        :figwidth: 60%
+        :width: 95%
+        :figwidth: 65%
         :align: left
         :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+
     long long text...
 
 .. video:: _static/video.mp4
-    :width: 100%
-    :figwidth: 60%
+    :width: 95%
+    :figwidth: 65%
     :align: left
     :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
 
@@ -204,19 +205,24 @@ long long text long long text long long text long long text long long text long
 long long text long long text long long text long long text long long text long long text long long text
 long long text long long text long long text long long text long long text long long text long long text
 long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
 
 .. code-block:: rst
 
     .. video:: _static/video.mp4
-        :width: 100%
-        :figwidth: 60%
+        :width: 95%
+        :figwidth: 65%
         :align: right
         :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+
     long long text...
 
 .. video:: _static/video.mp4
-    :width: 100%
-    :figwidth: 60%
+    :width: 95%
+    :figwidth: 65%
     :align: right
     :caption: The caption text text xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
 
@@ -226,6 +232,10 @@ long long text long long text long long text long long text long long text long
 long long text long long text long long text long long text long long text long long text long long text
 long long text long long text long long text long long text long long text long long text long long text
 long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
+long long text long long text long long text long long text long long text long long text long long text
 
 
 Advanced Usage