Play videos inline

docs/.vitepress/theme/Layout.vue

@@ -13,6 +13,7 @@
         autoplay
         loop
         muted
+        playsinline
         data-name="teaser"
         poster="/images/teaser-dark.jpg"
       >

docs/get-started.md

@@ -201,7 +201,7 @@ point location.
 For instance, try calling [`scatter.xy('speed', 'mass')`](./api#scatter.xy) and
 you will see how the points are mirrored along the diagonal.
 
-<video autoplay loop muted width="458" data-name="get-started-xy-animation">
+<video autoplay loop muted playsinline width="458" data-name="get-started-xy-animation">
   <source
     src="/videos/get-started-xy-animation-light.mp4"
     type="video/mp4"

docs/interactions.md

@@ -12,7 +12,7 @@ different areas of the scatter plot in detail.
 To pan, click and hold the primary mouse button and drag your mouse.
 
 <div class="video">
-  <video loop muted width="1256" data-name="interactions-pan">
+  <video loop muted playsinline width="1256" data-name="interactions-pan">
     <source
       src="/videos/interactions-pan-light.mp4"
       type="video/mp4"
@@ -24,7 +24,7 @@ To pan, click and hold the primary mouse button and drag your mouse.
 To zoom, simply engage your mouse's scroll wheel.
 
 <div class="video">
-  <video loop muted width="1256" data-name="interactions-zoom">
+  <video loop muted playsinline width="1256" data-name="interactions-zoom">
     <source
       src="/videos/interactions-zoom-light.mp4"
       type="video/mp4"
@@ -39,7 +39,7 @@ To help locate a point and where it's located, when you mouse over a point, a
 reticle will appear.
 
 <div class="video">
-  <video loop muted width="1256" data-name="interactions-hover">
+  <video loop muted playsinline width="1256" data-name="interactions-hover">
     <source
       src="/videos/interactions-hover-light.mp4"
       type="video/mp4"
@@ -53,7 +53,7 @@ reticle will appear.
 In order to select a point you can click on it.
 
 <div class="video">
-  <video loop muted width="1256" data-name="interactions-click">
+  <video loop muted playsinline width="1256" data-name="interactions-click">
     <source
       src="/videos/interactions-click-light.mp4"
       type="video/mp4"
@@ -67,7 +67,7 @@ In order to select a point you can click on it.
 To deselect points, simply double click into the background.
 
 <div class="video">
-  <video loop muted width="1256" data-name="interactions-double-click">
+  <video loop muted playsinline width="1256" data-name="interactions-double-click">
     <source
       src="/videos/interactions-double-click-light.mp4"
       type="video/mp4"
@@ -85,7 +85,7 @@ circle will appear and slowly close in clockwise order. Once the circle is fully
 closed it'll turn blue. At this point the lasso is active.
 
 <div class="video">
-  <video loop muted width="1256" data-name="interactions-lasso">
+  <video loop muted playsinline width="1256" data-name="interactions-lasso">
     <source
       src="/videos/interactions-lasso-light.mp4"
       type="video/mp4"
@@ -118,7 +118,7 @@ scatter.filter(None)
 ```
 
 <div class="video">
-  <video loop muted width="1256" data-name="interactions-filter">
+  <video loop muted playsinline width="1256" data-name="interactions-filter">
     <source
       src="/videos/interactions-filter-light.mp4"
       type="video/mp4"
@@ -138,7 +138,7 @@ scatter.zoom([0, 1, 2])
 ```
 
 <div class="video">
-  <video loop muted width="1256" data-name="interactions-zoom-to-points">
+  <video loop muted playsinline width="1256" data-name="interactions-zoom-to-points">
     <source
       src="/videos/interactions-zoom-to-points-light.mp4"
       type="video/mp4"
@@ -195,7 +195,7 @@ compose(
 ```
 
 <div class="video">
-  <video loop muted width="826" data-name="interactions-overview-and-details">
+  <video loop muted playsinline width="826" data-name="interactions-overview-and-details">
     <source
       src="/videos/interactions-overview-and-details-light.mp4"
       type="video/mp4"

docs/link-multiple-plots.md

@@ -62,7 +62,7 @@ jscatter.compose(
 )
 ```
 
-<video autoplay loop muted data-name="link-multiple-plots-synced" width="1000">
+<video autoplay loop muted playsinline data-name="link-multiple-plots-synced" width="1000">
   <source
     src="/videos/link-multiple-plots-synced-light.mp4"
     type="video/mp4"

docs/selections.md

@@ -71,7 +71,7 @@ Alternatively, if you're binding a DataFrame to a `Scatter` instance via
 As you might have seen already in the [interactions guide](./interactions), we
 can also select points interactively using the lasso tool.
 
-<video autoplay loop muted width="1256" data-name="interactions-lasso">
+<video autoplay loop muted playsinline width="1256" data-name="interactions-lasso">
   <source
     src="/videos/interactions-lasso-dark.mp4"
     type="video/mp4"
@@ -139,7 +139,7 @@ scatter.widget.observe(selection_change_handler, names=["selection"])
 ipywidgets.HBox([scatter.show(), output])
 ````
 
-<video autoplay loop muted width="1258" data-name="selections-observe">
+<video autoplay loop muted playsinline width="1258" data-name="selections-observe">
   <source
     src="/videos/selections-observe-dark.mp4"
     type="video/mp4"