uikit 3.25.17-dev.80dfe87 → 3.25.17-dev.8c70e44

package/tests/video.html

@@ -55,12 +55,12 @@
             Lazy videos by removing preload none when entering the viewport
             -->
 
-            <h2>Inline Video</h2>
+            <h2>Autoplay</h2>
 
             <div class="uk-grid uk-child-width-1-3@s">
                 <div>
 
-                    <h3>Autoplay</h3>
+                    <h3>Native</h3>
                     <!--
                     # Native Autoplay
                     Chrome: `Out of view` + `Hidden`: Stops playing.
@@ -70,61 +70,75 @@
 
                     <!-- `Out of view`: continous playing. `Hidden`: stops playing -->
                     <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video></video>
+
                 </div>
                 <div>
 
-                    <h3>Autoplay Inview</h3>
+                    <h3>YouTube</h3>
+                    <!--
+                    # Native Autoplay `autoplay=1`
+                    All browsers: `Out of view` + `Hidden`: Doesn't stop when hidden.
+                    -->
+
+                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video></iframe>
 
-                    <!-- `Out of view` + `Hidden`: stops playing -->
-                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview"></video>
                 </div>
                 <div>
 
-                    <h3>Autoplay Hover</h3>
+                    <h3>Vimeo</h3>
+
+                    <iframe src="https://player.vimeo.com/video/1084537?background=1&amp;keyboard=0&amp;muted=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video></iframe>
 
-                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: hover"></video>
                 </div>
             </div>
 
-            <h2>Inline YouTube</h2>
+            <h2>Autoplay Inview</h2>
 
             <div class="uk-grid uk-child-width-1-3@s">
                 <div>
 
-                    <h3>Autoplay</h3>
-                    <!--
-                    # Native Autoplay `autoplay=1`
-                    All browsers: `Out of view` + `Hidden`: Doesn't stop when hidden.
-                    -->
+                    <h3>Native</h3>
 
-                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video></iframe>
+                    <!-- `Out of view` + `Hidden`: stops playing -->
+                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview"></video>
 
                 </div>
                 <div>
 
-                    <h3>Autoplay Inview</h3>
+                    <h3>YouTube</h3>
 
                     <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video="autoplay: inview"></iframe>
 
                 </div>
+                <div>
+
+                    <h3>Vimeo</h3>
+
+                    <iframe src="https://player.vimeo.com/video/1084537?background=1&amp;keyboard=0&amp;muted=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video="autoplay: inview"></iframe>
+
+                </div>
             </div>
 
-            <h2>Inline Vimeo</h2>
+            <h2>Autoplay Hover</h2>
 
             <div class="uk-grid uk-child-width-1-3@s">
                 <div>
 
-                    <h3>Autoplay</h3>
-
-                    <iframe src="https://player.vimeo.com/video/1084537?background=1&amp;keyboard=0&amp;muted=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video></iframe>
+                    <h3>Autoplay Hover</h3>
 
+                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: hover"></video>
                 </div>
                 <div>
 
-                    <h3>Autoplay Inview</h3>
+                    <h3>Autoplay Hover Target</h3>
 
-                    <iframe src="https://player.vimeo.com/video/1084537?background=1&amp;keyboard=0&amp;muted=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video="autoplay: inview"></iframe>
+                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: hover; hover-target: !.uk-grid"></video>
+                </div>
+                <div>
 
+                    <h3>Autoplay Hover Rewind</h3>
+
+                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: hover; hover-rewind: 3"></video>
                 </div>
             </div>
 
@@ -167,6 +181,144 @@
                 </div>
             </div>
 
+            <h2>Autoplay Parallax</h2>
+
+            <div class="uk-grid uk-child-width-1-2@s">
+                <div>
+                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline muted uk-video="autoplay: parallax; parallax-start: 100%; parallax-end: 100%"></video>
+                </div>
+            </div>
+
+            <h2>Autoplay Inview Margin (-40 0)</h2>
+
+            <div class="uk-grid uk-child-width-1-3@s">
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675550/8675550-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675542/8675542-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675544/8675544-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675539/8675539-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675545/8675545-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675540/8675540-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675542/8675542-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675588/8675588-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675541/8675541-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675548/8675548-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675586/8675586-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675555/8675555-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
+
+                </div>
+            </div>
+
+            <h2>Autoplay Inview Queued (33%)</h2>
+
+            <div class="uk-grid uk-child-width-1-3@s">
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675550/8675550-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675542/8675542-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675544/8675544-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675539/8675539-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675545/8675545-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675540/8675540-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675542/8675542-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675588/8675588-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675541/8675541-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675548/8675548-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675586/8675586-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+                <div>
+
+                    <video src="https://videos.pexels.com/video-files/8675555/8675555-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
+
+                </div>
+            </div>
+
             <h2>JavaScript Options</h2>
 
             <table class="uk-table uk-table-striped">
@@ -183,19 +335,67 @@
                         <td><code>autoplay</code></td>
                         <td>Boolean, String</td>
                         <td>true</td>
-                        <td>Disable or enable autoplay (`false`, `true`). Videos will stop when hidden and continue playing when leaving the viewport. Use `inview` to also stop the video when leaving the viewport. Use `hover` to play the video only on hover. Note: Hover does not work with iframes.</td>
+                        <td>Disable or enable autoplay (`false`, `true`). Videos will stop when hidden and continue playing when leaving the viewport. Use `inview` to also stop the video when leaving the viewport. Use `hover` to play the video only on hover. Use `parallax` to connect video playback to scrolling. Note: `hover` and `parallax` do not work with iframes.</td>
                     </tr>
                     <tr>
                         <td><code>restart</code></td>
                         <td>Boolean</td>
                         <td>false</td>
-                        <td>Video will seek to the beginning whenever video element's autoplay option pauses the video.</td>
+                        <td>Seeks the video back to the beginning whenever autoplay pauses it.</td>
                     </tr>
                     <tr>
                         <td><code>hover-target</code></td>
                         <td>CSS Selector</td>
                         <td>self</td>
-                        <td>The element that functions as hover toggle when autoplay option is set to `hover`.</td>
+                        <td>Element used as the hover trigger when `autoplay` is set to `hover`.</td>
+                    </tr>
+                    <tr>
+                        <td><code>hover-rewind</code></td>
+                        <td>Number</td>
+                        <td>0</td>
+                        <td>The rate at which the video is being rewound once the element is no longer hovered, when autoplay option is set to `hover`. The rewind speed accelerates after 5 seconds of playback.</td>
+                    </tr>
+                    <tr>
+                        <td><code>inview-margin</code></td>
+                        <td>String</td>
+                        <td>0px</td>
+                        <td>Margin added to the viewport when determining whether the element is in view.</td>
+                    </tr>
+                    <tr>
+                        <td><code>inview-queued</code></td>
+                        <td>Number</td>
+                        <td>0</td>
+                        <td>Limits the number of simultaneously playing videos when multiple videos are in view. The value is a ratio (0–1) of videos that may play at once relative to all queued in-view videos.</td>
+                    </tr>
+                    <tr>
+                        <td><code>parallax-target</code></td>
+                        <td>CSS selector</td>
+                        <td>false</td>
+                        <td>Element dimension reference for the parallax duration. Defaults to the video element.</td>
+                    </tr>
+                    <tr>
+                        <td><code>parallax-start</code></td>
+                        <td>Length</td>
+                        <td>0</td>
+                        <td>Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's top border and viewport's bottom border intersect.</td>
+                    </tr>
+                    <tr>
+                        <td><code>parallax-end</code></td>
+                        <td>Length</td>
+                        <td>0</td>
+                        <td>End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's bottom border and the viewport's top border intersect.</td>
+                    </tr>
+                    <tr>
+                        <td><code>parallax-easing</code></td>
+                        <td>Number</td>
+                        <td>0</td>
+                        <td>Animation easing during scrolling.</td>
+                    </tr>
+                    <tr>
+                        <td><code>reduced-motion-time</code></td>
+                        <td>Number</td>
+                        <td>0</td>
+                        <td>The time in seconds to seek to when autoplay is prevented by the `prefers-reduced-motion` media query. The video is paused at this position to display a still frame.</td>
                     </tr>
                 </tbody>
             </table>

package/tests/visibility.html

@@ -16,7 +16,7 @@
 
             <h2>Hidden</h2>
 
-            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
+            <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center">
                 <div>
                     <div class="uk-panel">
                         <div class="uk-alert uk-margin-remove uk-alert-success">✔ Small<br>(Phone Landscape)</div>
@@ -45,7 +45,7 @@
 
             <h2>Visible</h2>
 
-            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
+            <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center">
                 <div>
                     <div class="uk-panel">
                         <div class="uk-alert uk-margin-remove">Small<br>(Phone Landscape)</div>
@@ -74,7 +74,7 @@
 
             <h2>Toggle (Hover + Focus)</h2>
 
-            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
+            <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center">
                 <div>
                     <div class="uk-panel uk-visible-toggle" tabindex="0">
                         <div class="uk-alert uk-margin-remove">Hidden Hover<br><br></div>
@@ -91,7 +91,7 @@
 
             <h2>Touch</h2>
 
-            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
+            <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center">
                 <div>
                     <div class="uk-panel">
                         <div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden Touch</div>

package/tests/width.html

@@ -35,7 +35,7 @@
 
             <h2>Child Widths</h2>
 
-            <div class="uk-grid-match uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l uk-child-width-1-6@xl" uk-grid>
+            <div class="uk-grid uk-grid-match uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l uk-child-width-1-6@xl">
                 <div><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
                 <div><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
                 <div><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
@@ -46,7 +46,7 @@
 
             <h2>Single Widths</h2>
 
-            <div class="uk-grid-match" uk-grid>
+            <div class="uk-grid uk-grid-match">
                 <div class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
                 <div class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
                 <div class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
@@ -57,7 +57,7 @@
 
             <h2>Mixed</h2>
 
-            <div class="uk-grid-match uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l uk-child-width-1-6@xl" uk-grid>
+            <div class="uk-grid uk-grid-match uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l uk-child-width-1-6@xl">
                 <div class="uk-width-expand"><div class="uk-panel">Expand</div></div>
                 <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
                 <div><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
@@ -67,7 +67,7 @@
 
             <h2>Expand</h2>
 
-            <div class="uk-grid-match uk-child-width-expand" uk-grid>
+            <div class="uk-grid uk-grid-match uk-child-width-expand">
                 <div><div class="uk-panel">Expand with some more text</div></div>
                 <div><div class="uk-panel uk-width-large">Panel Width Large</div></div>
                 <div><div class="uk-panel">Expand</div></div>
@@ -76,14 +76,14 @@
                 <div><div class="uk-panel"><img src="images/photo.jpg" width="1800" height="1200" alt=""></div></div>
             </div>
 
-            <div class="uk-grid-collapse uk-grid-match uk-child-width-expand uk-margin" uk-grid>
+            <div class="uk-grid uk-grid-collapse uk-grid-match uk-child-width-expand uk-margin">
                 <div class="uk-width-1-1"><div class="uk-panel">1-1</div></div>
                 <div><div class="uk-panel">Expand</div></div>
             </div>
 
             <h2>Auto</h2>
 
-            <div class="uk-grid-match uk-child-width-auto" uk-grid>
+            <div class="uk-grid uk-grid-match uk-child-width-auto">
                 <div><div class="uk-panel">Auto with some more text</div></div>
                 <div><div class="uk-panel">Auto</div></div>
                 <div><div class="uk-panel">Auto</div></div>
@@ -92,34 +92,34 @@
                 <div><div class="uk-panel">Auto</div></div>
             </div>
 
-            <div class="uk-grid-match uk-child-width-auto uk-flex-between" uk-grid>
+            <div class="uk-grid uk-grid-match uk-child-width-auto uk-flex-between">
                 <div><div class="uk-panel">Auto with some more text and space between the two items</div></div>
                 <div><div class="uk-panel">Auto with some more text</div></div>
             </div>
 
             <h2>Pixel</h2>
 
-            <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
+            <ul class="uk-grid uk-grid-small uk-grid-match uk-child-width-expand">
                 <li class="uk-width-small"><div class="uk-panel">Small</div></li>
                 <li><div class="uk-panel">Expand with some more text</div></li>
             </ul>
 
-            <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
+            <ul class="uk-grid uk-grid-small uk-grid-match uk-child-width-expand">
                 <li class="uk-width-medium@s"><div class="uk-panel">Medium</div></li>
                 <li><div class="uk-panel">Expand with some more text</div></li>
             </ul>
 
-            <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
+            <ul class="uk-grid uk-grid-small uk-grid-match uk-child-width-expand">
                 <li class="uk-width-large@s"><div class="uk-panel">Large</div></li>
                 <li><div class="uk-panel">Expand with some more text</div></li>
             </ul>
 
-            <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
+            <ul class="uk-grid uk-grid-small uk-grid-match uk-child-width-expand">
                 <li class="uk-width-xlarge@m"><div class="uk-panel">X-Large</div></li>
                 <li><div class="uk-panel">Expand with some more text</div></li>
             </ul>
 
-            <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
+            <ul class="uk-grid uk-grid-small uk-grid-match uk-child-width-expand">
                 <li class="uk-width-2xlarge@l"><div class="uk-panel">2X-Large</div></li>
                 <li><div class="uk-panel">Expand with some more text</div></li>
             </ul>