diff --git a/src/layout/css/style.scss b/src/layout/css/style.scss
index 4fa45343..b9198ce7 100644
--- a/src/layout/css/style.scss
+++ b/src/layout/css/style.scss
@@ -140,41 +140,43 @@ $extra-media-width: 320px;
   }
 }
 
-div.image {
+div.media {
   border: $border-width solid #e6e6e6;
   float: right;
   height: $extra-height;
   margin: 0 $spacing;
   overflow: hidden;
   width: $extra-media-width;
-
-  img {
-    // width: $extra-media-width;
-  }
 }
 
-.image-container {
-  display: flex;
+.media-container {
+  display: grid;
+  grid-template-columns: 25px auto 25px;
   align-items: center;
   flex: 1 1;
   overflow: hidden;
   height: 200px;
 }
-.image-container__nav--right,
-.image-container__nav--left {
-  flex: 0 0 25px;
+.media-container__nav--right,
+.media-container__nav--left {
   text-align: center;
   cursor: pointer;
 }
 
-.image-container__frame {
-  flex: 1 1;
+.media-container__viewport {
   cursor: pointer;
   text-align: center;
+  height: inherit;
+  img,
+  video {
+    object-fit: cover;
+    width: 100%;
+    max-height: 100%;
+  }
 }
 
-.image-name,
-.image-overview {
+.media__name,
+.media__counter {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
@@ -182,21 +184,6 @@ div.image {
   align-items: center;
 }
 
-div.video {
-  border: $border-width solid #e6e6e6;
-  float: right;
-  height: $extra-height;
-  margin-left: $spacing;
-  overflow: hidden;
-  width: $extra-media-width;
-
-  video {
-    overflow: hidden;
-    width: $extra-media-width;
-    height: $extra-height;
-  }
-}
-
 .collapsed {
   display: none;
 }
diff --git a/src/pytest_html/resources/index.jinja2 b/src/pytest_html/resources/index.jinja2
index 5dfcf031..d1596da4 100644
--- a/src/pytest_html/resources/index.jinja2
+++ b/src/pytest_html/resources/index.jinja2
@@ -31,11 +31,6 @@
     <template id="template_a">
       <a target="_blank"></a>
     </template>
-    <template id="template_img">
-      <a target="_blank">
-        <img />
-      </a>
-    </template>
     <template id="template_results-table__tbody">
       <tbody class="results-table-row">
         <tr>
@@ -46,14 +41,19 @@
         </tr>
         <tr class="extras-row">
           <td class="extra" colspan="4">
-            <div class="image">
-              <div class="image-container">
-                  <div class="image-container__nav--left"><</div>
-                  <div class="image-container__frame"></div>
-                  <div class="image-container__nav--right">></div>
+            <div class="media">
+              <div class="media-container">
+                  <div class="media-container__nav--left"><</div>
+                  <div class="media-container__viewport">
+                    <img src="" />
+                    <video controls>
+                      <source src="" type="video/mp4">
+                    </video>
+                  </div>
+                  <div class="media-container__nav--right">></div>
                 </div>
-                <div class="image-name"></div> 
-                <div class="image-overview"></div> 
+                <div class="media__name"></div> 
+                <div class="media__counter"></div> 
             </div>
             <div class="log"></div>
           </td>
diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css
index 925dd232..842c9a1a 100644
--- a/src/pytest_html/resources/style.css
+++ b/src/pytest_html/resources/style.css
@@ -119,7 +119,7 @@ span.xpassed,
   height: inherit;
 }
 
-div.image {
+div.media {
   border: 1px solid #e6e6e6;
   float: right;
   height: 240px;
@@ -127,29 +127,36 @@ div.image {
   overflow: hidden;
   width: 320px;
 }
-.image-container {
-  display: flex;
+
+.media-container {
+  display: grid;
+  grid-template-columns: 25px auto 25px;
   align-items: center;
   flex: 1 1;
   overflow: hidden;
   height: 200px;
 }
 
-.image-container__nav--right,
-.image-container__nav--left {
-  flex: 0 0 25px;
+.media-container__nav--right,
+.media-container__nav--left {
   text-align: center;
   cursor: pointer;
 }
 
-.image-container__frame {
-  flex: 1 1;
+.media-container__viewport {
   cursor: pointer;
   text-align: center;
+  height: inherit;
+}
+.media-container__viewport img,
+.media-container__viewport video {
+  object-fit: cover;
+  width: 100%;
+  max-height: 100%;
 }
 
-.image-name,
-.image-overview {
+.media__name,
+.media__counter {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
@@ -157,20 +164,6 @@ div.image {
   align-items: center;
 }
 
-div.video {
-  border: 1px solid #e6e6e6;
-  float: right;
-  height: 240px;
-  margin-left: 5px;
-  overflow: hidden;
-  width: 320px;
-}
-div.video video {
-  overflow: hidden;
-  width: 320px;
-  height: 240px;
-}
-
 .collapsed {
   display: none;
 }
diff --git a/src/pytest_html/scripts/dom.js b/src/pytest_html/scripts/dom.js
index cd677606..779f7ec9 100644
--- a/src/pytest_html/scripts/dom.js
+++ b/src/pytest_html/scripts/dom.js
@@ -1,5 +1,5 @@
 const { formatDuration } = require('./utils.js')
-const imgViewer = require('./imgViewer.js')
+const mediaViewer = require('./mediaViewer.js')
 const templateEnvRow = document.querySelector('#template_environment_row')
 const templateResult = document.querySelector('#template_results-table__tbody')
 const aTag = document.querySelector('#template_a')
@@ -77,7 +77,7 @@ const dom = {
         } else {
             resultBody.querySelector('.extras-row').classList.add('hidden')
         }
-        const images = []
+        const media = []
         extras?.forEach(({ name, format_type, content }) => {
             const extraLink = aTag.content.cloneNode(true)
             const extraLinkItem = extraLink.querySelector('a')
@@ -87,11 +87,11 @@ const dom = {
             extraLinkItem.innerText = name
             resultBody.querySelector('.col-links').appendChild(extraLinkItem)
 
-            if (format_type === 'image') {
-                images.push({ path: content, name })
+            if (['image', 'video'].includes(format_type)) {
+                media.push({ path: content, name, format_type })
             }
         })
-        imgViewer.setupImgViewer(resultBody, images)
+        mediaViewer.setUp(resultBody, media)
 
         // Add custom html from the pytest_html_results_table_row hook
         resultsTableRow && insertAdditionalHTML(resultsTableRow, resultBody, 'td')
diff --git a/src/pytest_html/scripts/imgviewer.js b/src/pytest_html/scripts/imgviewer.js
deleted file mode 100644
index ffe88cba..00000000
--- a/src/pytest_html/scripts/imgviewer.js
+++ /dev/null
@@ -1,59 +0,0 @@
-class ImageViewer {
-    constructor(assets) {
-        this.assets = assets
-        this.active = 0
-    }
-    nextActive() {
-        this.active = this.active === (this.assets.length - 1 ) ? 0 : this.active + 1
-        return [this.active, this.activeImage]
-    }
-    prevActive() {
-        this.active = this.active === 0 ? this.assets.length - 1 : this.active -1
-        return [this.active, this.activeImage]
-    }
-
-    get imageIndex() {
-        return this.active
-    }
-    get activeImage() {
-        return this.assets[this.active]
-    }
-}
-
-
-const setupImgViewer = (resultBody, assets) => {
-    const imgViewer = new ImageViewer(assets)
-    const leftArrow = resultBody.querySelector('.image-container__nav--left')
-    const rightArrow = resultBody.querySelector('.image-container__nav--right')
-    const imgContainer = resultBody.querySelector('.image-container__frame')
-    const imageName = resultBody.querySelector('.image-name')
-    const counter = resultBody.querySelector('.image-overview')
-
-    const imgel = document.createElement('img')
-    imgContainer.appendChild(imgel)
-
-    const setImg = (image, index) => {
-        imgel.src = image?.path
-        imageName.innerText = image?.name
-        counter.innerText = `${index + 1} / ${assets.length}`
-    }
-    setImg(imgViewer.activeImage, 0)
-
-    const moveLeft = () => {
-        const [index, image] = imgViewer.prevActive()
-        setImg(image, index)
-    }
-    const doRight = () => {
-        const [index, image] = imgViewer.nextActive()
-        setImg(image, index)
-    }
-    const openImg = () => {
-        window.open(imgViewer.activeImage, '_blank')
-    }
-
-    leftArrow.addEventListener('click', moveLeft)
-    rightArrow.addEventListener('click', doRight)
-    imgel.addEventListener('click', openImg)
-}
-
-exports.setupImgViewer = setupImgViewer
diff --git a/src/pytest_html/scripts/mediaviewer.js b/src/pytest_html/scripts/mediaviewer.js
new file mode 100644
index 00000000..8bf27a1f
--- /dev/null
+++ b/src/pytest_html/scripts/mediaviewer.js
@@ -0,0 +1,74 @@
+class MediaViewer {
+    constructor(assets) {
+        this.assets = assets
+        this.index = 0
+    }
+    nextActive() {
+        this.index = this.index === this.assets.length - 1 ? 0 : this.index + 1
+        return [this.activeFile, this.index]
+    }
+    prevActive() {
+        this.index = this.index === 0 ? this.assets.length - 1 : this.index -1
+        return [this.activeFile, this.index]
+    }
+
+    get currentIndex() {
+        return this.index
+    }
+    get activeFile() {
+        return this.assets[this.index]
+    }
+}
+
+
+const setUp = (resultBody, assets) => {
+    if (!assets.length) {
+        resultBody.querySelector('.media').classList.add('hidden')
+        return
+    }
+
+    const mediaViewer = new MediaViewer(assets)
+    const leftArrow = resultBody.querySelector('.media-container__nav--left')
+    const rightArrow = resultBody.querySelector('.media-container__nav--right')
+    const mediaName = resultBody.querySelector('.media__name')
+    const counter = resultBody.querySelector('.media__counter')
+    const imageEl = resultBody.querySelector('img')
+    const sourceEl = resultBody.querySelector('source')
+    const videoEl = resultBody.querySelector('video')
+
+    const setImg = (media, index) => {
+        if (media?.format_type === 'image') {
+            imageEl.src = media.path
+
+            imageEl.classList.remove('hidden')
+            videoEl.classList.add('hidden')
+        } else if (media?.format_type === 'video') {
+            sourceEl.src = media.path
+
+            videoEl.classList.remove('hidden')
+            imageEl.classList.add('hidden')
+        }
+
+        mediaName.innerText = media?.name
+        counter.innerText = `${index + 1} / ${assets.length}`
+    }
+    setImg(mediaViewer.activeFile, mediaViewer.currentIndex)
+
+    const moveLeft = () => {
+        const [media, index] = mediaViewer.prevActive()
+        setImg(media, index)
+    }
+    const doRight = () => {
+        const [media, index] = mediaViewer.nextActive()
+        setImg(media, index)
+    }
+    const openImg = () => {
+        window.open(mediaViewer.activeFile.path, '_blank')
+    }
+
+    leftArrow.addEventListener('click', moveLeft)
+    rightArrow.addEventListener('click', doRight)
+    imageEl.addEventListener('click', openImg)
+}
+
+exports.setUp = setUp
diff --git a/src/pytest_html/scripts/test_data.js b/src/pytest_html/scripts/test_data.js
deleted file mode 100644
index fb1bcadf..00000000
--- a/src/pytest_html/scripts/test_data.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const testData = {"title": "BARA FEJK", "collectedItems": 2, "environment": {"Python": "3.9.10", "Platform": "macOS-11.6-x86_64-i386-64bit", "Packages": {"pytest": "6.2.5", "py": "1.11.0", "pluggy": "1.0.0"}, "Plugins": {"metadata": "1.11.0", "html": "3.1.2.dev69"}}, "tests": [{"nodeid": "test_html.py::test_url", "location": ["test_html.py", 4, "test_url"], "keywords": {"test_url": 1, "test_html.py": 1, "testing-html": 1}, "outcome": "passed", "longrepr": null, "when": "setup", "user_properties": [], "sections": [], "duration": 0.0003443180000000101, "$report_type": "TestReport"}, {"nodeid": "test_html.py::test_url", "location": ["test_html.py", 4, "test_url"], "keywords": {"test_url": 1, "test_html.py": 1, "testing-html": 1}, "outcome": "failed", "longrepr": {"reprcrash": {"path": "/Volumes/code/testing-html/test_html.py", "lineno": 16, "message": "assert False"}, "reprtraceback": {"reprentries": [{"type": "ReprEntry", "data": {"lines": ["    def test_url(extra):", "        \"\"\"", "            meh", "            alb alb alb", "            @param: hello", "            :param just", "        \"\"\"", "        # driver.get(\"https://www.google.com\")", "        extra.append(extras.text(\"some string\"))", "        extra.append(extras.image(\"file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png\"))", "        extra.append(extras.image(\"file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png\"))", ">       assert False", "E       assert False"], "reprfuncargs": {"args": [["extra", "[{'content': 'some string', 'extension': 'txt', 'format_type': 'text', 'mime_type': 'text/plain', ...}, {'content': 'f...ev/pytest-dev/testing-html/screenshot.png', 'extension': 'png', 'format_type': 'image', 'mime_type': 'image/png', ...}]"]]}, "reprlocals": null, "reprfileloc": {"path": "test_html.py", "lineno": 16, "message": "AssertionError"}, "style": "long"}}], "extraline": null, "style": "long"}, "sections": [], "chain": [[{"reprentries": [{"type": "ReprEntry", "data": {"lines": ["    def test_url(extra):", "        \"\"\"", "            bla bla bla bla", "            alb alb alb", "            @param: hello", "            :param just", "        \"\"\"", "        # driver.get(\"https://www.google.com\")", "        extra.append(extras.text(\"some string\"))", "        extra.append(extras.image(\"file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png\"))", "        extra.append(extras.image(\"file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png\"))", ">       assert False", "E       assert False"], "reprfuncargs": {"args": [["extra", "[{'content': 'some string', 'extension': 'txt', 'format_type': 'text', 'mime_type': 'text/plain', ...}, {'content': 'f...ev/pytest-dev/testing-html/screenshot.png', 'extension': 'png', 'format_type': 'image', 'mime_type': 'image/png', ...}]"]]}, "reprlocals": null, "reprfileloc": {"path": "test_html.py", "lineno": 16, "message": "AssertionError"}, "style": "long"}}], "extraline": null, "style": "long"}, {"path": "/Volumes/code/testing-html/test_html.py", "lineno": 16, "message": "assert False"}, null]]}, "when": "call", "user_properties": [], "sections": [], "duration": 0.00022838299999999867, "extra": [{"name": "Text", "format_type": "text", "content": "some string", "mime_type": "text/plain", "extension": "txt"}, {"name": "Image", "format_type": "image", "content": "file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png", "mime_type": "image/png", "extension": "png"}, {"name": "Image", "format_type": "image", "content": "file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png", "mime_type": "image/png", "extension": "png"}], "$report_type": "TestReport"}, {"nodeid": "test_html.py::test_url", "location": ["test_html.py", 4, "test_url"], "keywords": {"test_url": 1, "test_html.py": 1, "testing-html": 1}, "outcome": "passed", "longrepr": null, "when": "teardown", "user_properties": [], "sections": [], "duration": 0.00014628500000002376, "$report_type": "TestReport"}, {"nodeid": "test_html.py::test_url2", "location": ["test_html.py", 18, "test_url2"], "keywords": {"test_html.py": 1, "test_url2": 1, "testing-html": 1}, "outcome": "passed", "longrepr": null, "when": "setup", "user_properties": [], "sections": [], "duration": 0.00011052099999997456, "$report_type": "TestReport"}, {"nodeid": "test_html.py::test_url2", "location": ["test_html.py", 18, "test_url2"], "keywords": {"test_html.py": 1, "test_url2": 1, "testing-html": 1}, "outcome": "passed", "longrepr": null, "when": "call", "user_properties": [], "sections": [], "duration": 0.0001266319999999599, "extra": [], "$report_type": "TestReport"}, {"nodeid": "test_html.py::test_url2", "location": ["test_html.py", 18, "test_url2"], "keywords": {"test_html.py": 1, "test_url2": 1, "testing-html": 1}, "outcome": "passed", "longrepr": null, "when": "teardown", "user_properties": [], "sections": [], "duration": 0.0002340050000000371, "$report_type": "TestReport"}]}
-const jsonData = {"title": "REAL REPORT", "collectedItems": 2, "environment": {"Python": "3.9.10", "Platform": "macOS-11.6-x86_64-i386-64bit", "Packages": {"pytest": "6.2.5", "py": "1.11.0", "pluggy": "1.0.0"}, "Plugins": {"metadata": "1.11.0", "html": "3.1.2.dev69"}}, "tests": [{"nodeid": "test_html.py::test_url", "location": ["test_html.py", 4, "test_url"], "keywords": {"test_url": 1, "test_html.py": 1, "testing-html": 1}, "outcome": "passed", "longrepr": null, "when": "setup", "user_properties": [], "sections": [], "duration": 0.0003443180000000101, "$report_type": "TestReport"}, {"nodeid": "test_html.py::test_url", "location": ["test_html.py", 4, "test_url"], "keywords": {"test_url": 1, "test_html.py": 1, "testing-html": 1}, "outcome": "failed", "longrepr": {"reprcrash": {"path": "/Volumes/code/testing-html/test_html.py", "lineno": 16, "message": "assert False"}, "reprtraceback": {"reprentries": [{"type": "ReprEntry", "data": {"lines": ["    def test_url(extra):", "        \"\"\"", "            meh", "            alb alb alb", "            @param: hello", "            :param just", "        \"\"\"", "        # driver.get(\"https://www.google.com\")", "        extra.append(extras.text(\"some string\"))", "        extra.append(extras.image(\"file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png\"))", "        extra.append(extras.image(\"file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png\"))", ">       assert False", "E       assert False"], "reprfuncargs": {"args": [["extra", "[{'content': 'some string', 'extension': 'txt', 'format_type': 'text', 'mime_type': 'text/plain', ...}, {'content': 'f...ev/pytest-dev/testing-html/screenshot.png', 'extension': 'png', 'format_type': 'image', 'mime_type': 'image/png', ...}]"]]}, "reprlocals": null, "reprfileloc": {"path": "test_html.py", "lineno": 16, "message": "AssertionError"}, "style": "long"}}], "extraline": null, "style": "long"}, "sections": [], "chain": [[{"reprentries": [{"type": "ReprEntry", "data": {"lines": ["    def test_url(extra):", "        \"\"\"", "            bla bla bla bla", "            alb alb alb", "            @param: hello", "            :param just", "        \"\"\"", "        # driver.get(\"https://www.google.com\")", "        extra.append(extras.text(\"some string\"))", "        extra.append(extras.image(\"file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png\"))", "        extra.append(extras.image(\"file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png\"))", ">       assert False", "E       assert False"], "reprfuncargs": {"args": [["extra", "[{'content': 'some string', 'extension': 'txt', 'format_type': 'text', 'mime_type': 'text/plain', ...}, {'content': 'f...ev/pytest-dev/testing-html/screenshot.png', 'extension': 'png', 'format_type': 'image', 'mime_type': 'image/png', ...}]"]]}, "reprlocals": null, "reprfileloc": {"path": "test_html.py", "lineno": 16, "message": "AssertionError"}, "style": "long"}}], "extraline": null, "style": "long"}, {"path": "/Volumes/code/testing-html/test_html.py", "lineno": 16, "message": "assert False"}, null]]}, "when": "call", "user_properties": [], "sections": [], "duration": 0.00022838299999999867, "extra": [{"name": "Text", "format_type": "text", "content": "some string", "mime_type": "text/plain", "extension": "txt"}, {"name": "Image", "format_type": "image", "content": "file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png", "mime_type": "image/png", "extension": "png"}, {"name": "Image", "format_type": "image", "content": "file:///Users/jimbrannlund/dev/pytest-dev/testing-html/screenshot.png", "mime_type": "image/png", "extension": "png"}], "$report_type": "TestReport"}, {"nodeid": "test_html.py::test_url", "location": ["test_html.py", 4, "test_url"], "keywords": {"test_url": 1, "test_html.py": 1, "testing-html": 1}, "outcome": "passed", "longrepr": null, "when": "teardown", "user_properties": [], "sections": [], "duration": 0.00014628500000002376, "$report_type": "TestReport"}, {"nodeid": "test_html.py::test_url2", "location": ["test_html.py", 18, "test_url2"], "keywords": {"test_html.py": 1, "test_url2": 1, "testing-html": 1}, "outcome": "passed", "longrepr": null, "when": "setup", "user_properties": [], "sections": [], "duration": 0.00011052099999997456, "$report_type": "TestReport"}, {"nodeid": "test_html.py::test_url2", "location": ["test_html.py", 18, "test_url2"], "keywords": {"test_html.py": 1, "test_url2": 1, "testing-html": 1}, "outcome": "passed", "longrepr": null, "when": "call", "user_properties": [], "sections": [], "duration": 0.0001266319999999599, "extra": [], "$report_type": "TestReport"}, {"nodeid": "test_html.py::test_url2", "location": ["test_html.py", 18, "test_url2"], "keywords": {"test_html.py": 1, "test_url2": 1, "testing-html": 1}, "outcome": "passed", "longrepr": null, "when": "teardown", "user_properties": [], "sections": [], "duration": 0.0002340050000000371, "$report_type": "TestReport"}]}
-
-exports.jsonData = jsonData
-exports.testData = testData