diff --git a/docs/user_guide.rst b/docs/user_guide.rst
index 2a29cb42..02ae001e 100644
--- a/docs/user_guide.rst
+++ b/docs/user_guide.rst
@@ -146,6 +146,7 @@ URL         ``extras.url('http://www.example.com/')``
 Image       ``extras.image(image, mime_type='image/gif', extension='gif')``
 Image       ``extras.image('/path/to/file.png')``
 Image       ``extras.image('http://some_image.png')``
+Video       ``extras.video(video, mime_type='video/webm', extension='webm')``
 ==========  ============================================
 
 **Note**: When adding an image from file, the path can be either absolute
diff --git a/src/pytest_html/resources/index.jinja2 b/src/pytest_html/resources/index.jinja2
index d899375e..25ac8836 100644
--- a/src/pytest_html/resources/index.jinja2
+++ b/src/pytest_html/resources/index.jinja2
@@ -46,7 +46,7 @@
                   <div class="media-container__viewport">
                     <img src="" />
                     <video controls>
-                      <source src="" type="video/mp4">
+                      <source src="">
                     </video>
                   </div>
                   <div class="media-container__nav--right">&gt;</div>
diff --git a/src/pytest_html/scripts/dom.js b/src/pytest_html/scripts/dom.js
index c4b55443..37f905d8 100644
--- a/src/pytest_html/scripts/dom.js
+++ b/src/pytest_html/scripts/dom.js
@@ -64,9 +64,9 @@ const dom = {
         }
 
         const media = []
-        extras?.forEach(({ name, format_type, content }) => {
+        extras?.forEach(({ name, format_type, content, mime_type }) => {
             if (['image', 'video'].includes(format_type)) {
-                media.push({ path: content, name, format_type })
+                media.push({ path: content, name, format_type, mime_type })
             }
 
             if (format_type === 'html') {
diff --git a/src/pytest_html/scripts/mediaviewer.js b/src/pytest_html/scripts/mediaviewer.js
index 5bf3ad69..b762cda3 100644
--- a/src/pytest_html/scripts/mediaviewer.js
+++ b/src/pytest_html/scripts/mediaviewer.js
@@ -48,6 +48,11 @@ const setup = (resultBody, assets) => {
             videoEl.classList.add('hidden')
         } else if (media?.format_type === 'video') {
             sourceEl.src = media.path
+            if (media.mime_type) {
+                sourceEl.type = media.mime_type
+            } else {
+                sourceEl.removeAttribute('type')
+            }
 
             videoEl.classList.remove('hidden')
             imageEl.classList.add('hidden')
diff --git a/testing/test_integration.py b/testing/test_integration.py
index 891c8877..2e2effdf 100644
--- a/testing/test_integration.py
+++ b/testing/test_integration.py
@@ -578,7 +578,13 @@ def pytest_runtest_makereport(item, call):
         element = page.select_one(".media img")
         assert_that(str(element)).is_equal_to(f'<img src="{src}"/>')
 
-    @pytest.mark.parametrize("mime_type, extension", [("video/mp4", "mp4")])
+    @pytest.mark.parametrize(
+        "mime_type, extension",
+        [
+            ("video/mp4", "mp4"),
+            ("video/webm", "webm"),
+        ],
+    )
     def test_extra_video(self, pytester, mime_type, extension):
         content = str(random.random())
         charset = "utf-8"
@@ -592,7 +598,9 @@ def pytest_runtest_makereport(item, call):
                 report = outcome.get_result()
                 if report.when == 'call':
                     from pytest_html import extras
-                    report.extras = [extras.{extension}('{data}')]
+                    report.extras = [
+                        extras.video('{data}', mime_type='{mime_type}', extension='{extension}')
+                    ]
         """
         )
         pytester.makepyfile("def test_pass(): pass")