diff --git a/build/docs/styles/videojs.css b/build/docs/styles/videojs.css
index 1e5447d308..5d6215b4ad 100644
--- a/build/docs/styles/videojs.css
+++ b/build/docs/styles/videojs.css
@@ -1,66 +1,408 @@
 #resizer,
 footer {
-  background-color: #ECEEF1;
-  color: #868688;
-  padding: 3px 10px;
+    background-color: #ECEEF1;
+    color: #868688;
+    padding: 3px 10px;
 }
 
 .footer-text {
-  padding: 3px;
-  display: block; 
+    padding: 3px;
+    display: block;
 }
 
 footer .copyright {
-  float: left;
+    float: left;
 }
 
 footer .logo {
-  display: none;
+    display: none;
 }
 
 .sidebar-title {
-  background: center / contain no-repeat url(https://videojs.com/logo-white.png);
-  text-indent: -999em;
+    background: center / contain no-repeat url(https://videojs.com/logo-white.png);
+    text-indent: -999em;
 }
 
 .light .sidebar-title,
 .dark .link-vjs a:before,
 .dark .link-gh a:before,
 .dark .link-tw a:before {
-  -webkit-filter: invert(80%);
-  filter: invert(80%);
+    -webkit-filter: invert(80%);
+    filter: invert(80%);
 }
 
 .link-vjs a:before,
 .link-gh a:before,
 .link-tw a:before {
-  content: "";
-  display: inline-block;
-  width: 1.5em;
-  height: 1em;
-  position: relative;
-  top: 0.1em;
+    content: "";
+    display: inline-block;
+    width: 1.5em;
+    height: 1em;
+    position: relative;
+    top: 0.1em;
 }
 
 .link-vjs a:before {
-  background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3e%3c/svg%3e") no-repeat;
+    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3e%3c/svg%3e") no-repeat;
 }
 
 .link-gh a:before {
-  background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z'/%3e%3c/svg%3e") no-repeat;
+    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z'/%3e%3c/svg%3e") no-repeat;
 }
 
 .link-tw a:before {
-  background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3e%3c/svg%3e") no-repeat;
+    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3c!--! Font Awesome Free 6.2.1 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --%3e%3cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3e%3c/svg%3e") no-repeat;
 }
 
 .light .navbar {
-  background-color: #f7f7f7;
-  border-radius: 1rem;
+    background-color: #f7f7f7;
+    border-radius: 1rem;
 
 }
 
 .dark .navbar {
-  background-color: #222;
-  border-radius: 1rem;
+    background-color: #222;
+    border-radius: 1rem;
+}
+
+
+/* ==============
+Content jump-to links
+================= */
+.has-anchor .link-anchor {
+    transition: .2s color;  
+}
+.light .has-anchor .link-anchor {
+    color: #4a4a4a;
+}
+.light .has-anchor .link-anchor:hover {
+    color: #171717;
+}
+    
+.dark .has-anchor .link-anchor {
+    color: #9f9f9f;
+}
+.dark .has-anchor .link-anchor:hover {
+    color: #d1d1d1;
+}
+
+/* ==============
+Navbar border
+================= */
+.dark .navbar {
+    border: 1px solid #424141;
+}
+.light .navbar {
+    border: 1px solid #c6c6c6;
+}
+
+/* ==============
+Navbar items
+================= */
+.navbar-left-items,
+.mobile-nav-links {
+    column-gap: .5rem;
+}
+.mobile-nav-links {
+    padding-left: 2rem;
+}
+.navbar-left-items .navbar-item,
+.mobile-nav-links .navbar-item {
+    transition: .4s background;
+}
+    
+.mobile-nav-links .navbar-item:hover a,
+.navbar-left-items .navbar-item:hover a {
+    text-decoration: underline;
+}
+
+
+.light .navbar-left-items .navbar-item,
+.light .mobile-nav-links .navbar-item {
+    border: 1px solid #d5d5d5;
+}
+
+
+.dark .navbar-left-items .navbar-item,
+.dark .mobile-nav-links .navbar-item {
+    background: #2b2b2b;
+}
+    
+.dark .navbar-left-items .navbar-item a,
+.dark .mobile-nav-links .navbar-item a {
+    color: #B8B8B8;
+}
+
+.dark .navbar-left-items .navbar-item:hover,
+.dark .mobile-nav-links .navbar-item:hover {
+    background: #373737;
+}
+.light .navbar-left-items .navbar-item:hover,
+.light .mobile-nav-links .navbar-item:hover{
+    background: #ddd;
+    border-color: #e0e0e0;
+}
+
+/* Fix mobile responsive issues with theme */
+@media screen and (max-width: 74.5rem) {
+    .navbar-left-items .navbar-item {
+        display: flex;
+        align-items: center;
+    }
+    .navbar-left-items .navbar-item a {
+        padding: 1rem;
+        text-align: center;
+    }
+}
+@media screen and (max-width: 68.75rem) {
+    .navbar-left-items .navbar-item a::before {
+        display: block;
+        left: 50%;
+        transform: translate(-25%, 0);
+        top: 0;
+    }
+}
+@media screen and (max-width: 65rem) {
+    .navbar-left-items .navbar-item a::before {
+        display: block;
+        left: 50%;
+        transform: translate(-25%, 0);
+        top: 0;
+    }
+}
+
+/* ==============
+Search container Light
+================= */
+
+/* Search close button */
+.light .search-container .search-close-button {
+    background: rgba(164, 164, 164, .26);
+    transition: background .4s;
+}
+.light .search-container .search-close-button:hover {
+    background: rgba(117, 117, 117, .26);
+}
+.light .search-container .search-close-button svg {
+    transition: fill .4s;
+}
+.light .search-container .search-close-button:hover svg {
+    fill: #4b2d2d;
+}
+
+/* Backdrop */
+.light .search-container {
+    background: rgb(0 0 0 / 26%);
+    transition: background .4s;
+    @starting-style {
+        background: rgb(0 0 0 / 0%);
+    }
+}
+
+/* Search controls */
+.light .search-container .wrapper {
+    border: 1px solid #828282;
+    transition: opacity .2s;
+    opacity: 1;
+    @starting-style {
+        opacity: 0;
+    }
+}
+
+/* ==============
+Search container Dark
+================= */
+
+/* Search close button */
+.dark .search-container .search-close-button {
+    background: rgb(0 0 0 / 26%);
+    transition: background .4s;
+}
+.dark .search-container .search-close-button:hover {
+    background: rgba(151, 151, 151, .26);
+}
+.dark .search-container .search-close-button svg {
+    transition: fill .4s;
+}
+
+.dark .search-container .search-close-button:hover svg {
+    fill: white;
+}
+
+/* Backdrop */
+.dark  .search-container {
+    background: rgba(71, 71, 71, .26);
+    transition: background .4s;
+    @starting-style {
+        background: rgb(0 0 0 / 0%);
+    }
+}
+
+/* Search controls */
+.dark .search-container .wrapper {
+    border: 1px solid #393939;
+    transition: opacity .2s;
+    opacity: 1;
+    @starting-style {
+        opacity: 0;
+    }
+}
+
+/* ==============
+Table of contents
+================= */
+
+.toc-list-item a {
+    transition: .2s color, .2s font-weight;
+}
+
+.toc-list .toc-link.is-active-link {
+    font-weight: bold;
+    text-decoration: underline;
+    font-family: inherit;
+}
+
+.dark .toc-list-item a:not(.is-active-link):hover {
+    color: #fff;
+    font-weight: bold;
+}
+
+.light .toc-list-item a:not(.is-active-link):hover {
+    color: #111;
+    font-weight: bold;
+}
+
+/* ========
+Sidebar Dark
+===========*/
+
+/* Title */
+
+.dark .sidebar-section-title {
+    color: #C2C2C2;
+}
+    
+.dark .sidebar-section-title:not([data-isopen="true"]):hover {
+    background: #1a1a1a;
+    border-color: #A6A6A6;
+}
+
+.dark .sidebar-section-title[data-isopen="true"] {
+    background: #323232;
+    border-color: #ADADAD;
+}
+.dark .sidebar-section-title[data-isopen="true"].with-arrow svg {
+    background: #404040;
+    border-radius: 50%;
+    fill: #C2C2C2;
+}
+
+/* Reference Links */
+.dark .sidebar-section-children.active {
+    background: #B5B5B5;
+}
+    
+.dark .sidebar-section-children.active a {
+    color: #0c0c0c;
+}
+
+.dark .sidebar-section-children.active a:hover {
+    background: #B5B5B5; /* don't change background for active sidebar child */
+    text-decoration: underline;
+}
+
+.dark .sidebar-section-children:not(.active) a:hover {
+    background: #1a1a1a;
+    text-decoration: underline;
+}
+
+/* =============
+Sidebar Light
+================ */
+
+/* Title */
+
+.sidebar-section-title {
+    border: 1px solid transparent;
+}
+.sidebar-section-title:hover {
+    text-decoration: underline;
+}
+.light .sidebar-section-title:hover {
+    background: #ededed;
+    border-color: #b1b1b1;
+}
+.light .sidebar-section-title[data-isopen="true"] {
+    background: #f8f8f8;
+    border-color: #565656;
+}
+.light .sidebar-section-title[data-isopen="true"].with-arrow svg {
+    transition: .3s background-color, .3s transform;
+    background: #cdcdcd;
+    border-radius: 50%;
+}
+
+/* Reference Links */
+.light .sidebar-section-children-container .sidebar-section-children.active {
+    background: #111111;
+}
+    
+.light .sidebar-section-children-container .sidebar-section-children.active a {
+    color: white;
+}
+
+.light .sidebar-section-children a:hover {
+    text-decoration-thickness: 2px !important;
+    text-underline-offset: 2px !important;
+    text-decoration: underline !important;
+}
+    
+.light .sidebar-section-children.active a:hover {
+    background: #111111;; /* don't change background for active sidebar child */
+}
+
+.light .sidebar-section-children:not(.active) a:hover {
+    background: #dbdbdb;
+    color: black;
+}
+
+/* =============
+Mobile container
+================ */
+/* Button */
+.mobile-menu-icon-container #mobile-menu {
+    transition: .8s background, .4s border-color, 4s box-shadow;
+    border: 1px solid #6f6f6f;
+}
+.light .mobile-menu-icon-container #mobile-menu {
+    background: #ddd;
+}
+
+.dark .mobile-menu-icon-container #mobile-menu {
+    box-shadow: 0 0 2px #868686e3;
+}
+    
+.dark .mobile-menu-icon-container #mobile-menu svg {
+    fill: #b0b0b0;
+}
+    
+.dark .mobile-menu-icon-container #mobile-menu[data-isopen="true"] {
+    background: #3c3c3c;
+    box-shadow: 0 0 2px #ffffff3d;
+}
+
+    
+.light .mobile-menu-icon-container #mobile-menu[data-isopen="true"] {
+    background: #ccc;
+    border-color: #8f8f8f;
+}
+/* Container */
+.mobile-sidebar-container {
+    transition: .2s opacity;
+}
+.mobile-sidebar-container.show {
+    opacity: 1;
+    @starting-style {
+        opacity: 0;
+    }
 }
\ No newline at end of file