Center images in sections and add video.js to personalize video controls (#420)

Author: ccordoba12

doc/_static/css/custom_styles.css

@@ -72,7 +72,8 @@
 /* Increase bottom margin for images */
 
 section img {
-  margin-bottom: 1rem;
+  display: block;
+  margin: 1rem auto;
 }
 
 /* Style for Font Awesome that only styles the icons before elements */
@@ -282,19 +283,6 @@ div.video-container-container + p {
   margin-top: 1em;
 }
 
-/* Style for video tags */
-
-video {
-  display: block;
-  height: auto;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 100%;
-  object-fit: contain;
-  object-position: center;
-  width: 100%;
-}
-
 /* Style for adding icons to the installers table */
 
 table.installer-table td {

doc/_static/css/video-js.min.css

@@ -0,0 +1,33 @@
+/* Layout tweaks for sphinxcontrib-video + Video.js (do not override vjs-tech positioning) */
+
+.bd-article .sphinx-contrib-video-container {
+  clear: both;
+  display: block;
+  float: none;
+  margin: 1.5rem auto;
+  max-width: 100%;
+  width: 100%;
+}
+
+.bd-article .sphinx-contrib-video-container.align-left,
+.bd-article .sphinx-contrib-video-container.align-right {
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.bd-article .sphinx-contrib-video-container .video-js {
+  max-width: 100%;
+  width: 100%;
+}
+
+/* Keep controls visible (paired with inactivityTimeout: 0 in video_player.js) */
+.bd-article .sphinx-contrib-video-container .video-js.vjs-user-inactive .vjs-control-bar {
+  opacity: 1;
+  visibility: visible;
+}
+
+.bd-article .sphinx-contrib-video-container + p,
+.bd-article .sphinx-contrib-video-container + img {
+  margin-top: 1rem;
+}

doc/_static/css/video_player.css

@@ -0,0 +1,51 @@
+// Initialize Video.js on documentation screencasts (sphinxcontrib-video output).
+
+(function () {
+  "use strict";
+
+  const PLAYER_OPTIONS = {
+    controls: true,
+    fluid: true,
+    inactivityTimeout: 0,
+    preload: "auto",
+    controlBar: {
+      children: [
+        "playToggle",
+        "volumePanel",
+        "currentTimeDisplay",
+        "timeDivider",
+        "durationDisplay",
+        "progressControl",
+        "fullscreenToggle",
+      ],
+    },
+  };
+
+  function initDocVideos() {
+    if (typeof videojs === "undefined") {
+      return;
+    }
+
+    document
+      .querySelectorAll(".sphinx-contrib-video-container video")
+      .forEach(function (el) {
+        if (videojs.getPlayer(el)) {
+          return;
+        }
+
+        el.classList.add("video-js");
+
+        const player = videojs(el, PLAYER_OPTIONS);
+
+        player.one("loadedmetadata", function () {
+          const w = player.videoWidth();
+          const h = player.videoHeight();
+          if (w && h) {
+            player.aspectRatio(w + ":" + h);
+          }
+        });
+      });
+  }
+
+  document.addEventListener("DOMContentLoaded", initDocVideos);
+})();

doc/_static/js/video.min.js

@@ -184,12 +184,16 @@
 # Custom CSS for the site
 html_css_files = [
     "css/driver.min.css",
+    "css/video-js.min.css",
+    "css/video_player.css",
     "css/custom_styles.css",
 ]
 
 # Custom Javascript for the site
 html_js_files = [
     "js/driver.min.js",
+    "js/video.min.js",
+    "js/video_player.js",
     "js/custom_scripts.js",
     "js/language-switcher.js",
 ]

doc/_static/js/video_player.js

@@ -22,6 +22,7 @@ You can fully control debugger execution from the :guilabel:`Debug` menu, :guila
 
 .. video:: /images/debugging/debugging-commands.webm
    :loop:
+   :nocontrols:
    :alt: A Spyder IPython console window, showing debugging from toolbar
 
 Additionally, the  :ref:`panes-editor` shows the line of code the debugger is currently stopped on with an arrow.
@@ -37,6 +38,7 @@ Use the up and down arrows to recall previous commands, and press :kbd:`Tab` to
 
 .. video:: /images/debugging/debugging-autocompletion.webm
    :loop:
+   :nocontrols:
    :alt: A Spyder IPython console window, showing autocompletion when debugging
 
 Furthermore, IPython's `magic functions`_ are available in debugging mode.
@@ -51,6 +53,7 @@ Finally, you can enter and execute multiline statements in Spyder's debugger jus
 
 .. video:: /images/debugging/debugging-multiline.webm
    :loop:
+   :nocontrols:
    :alt: Debugger showing multiline debugger
 
 
@@ -78,6 +81,7 @@ There are several different ways to set and clear breakpoints:
 
 .. video:: /images/debugging/debugging-breakpoints.webm
    :loop:
+   :nocontrols:
    :alt: Spyder showing setting conditional breakpoint
 
 You can access and edit local and global variables at each breakpoint through the :ref:`panes-variables`.
@@ -125,6 +129,7 @@ Use the ``%matplotlib`` magic to change to an interactive backend (e.g. ``%matpl
 
 .. video:: /images/debugging/debugging-matplotlib.webm
    :loop:
+   :nocontrols:
    :alt: Debugger showing matplotlib interactive backend
 
 

doc/conf.py

@@ -15,6 +15,7 @@ module.exports = [
       globals: {
         browser: true,
         jquery: true,
+        videojs: "readonly",
       },
     },
     linterOptions: {