uikit 3.18.4-dev.4b6b928ae → 3.18.4-dev.5aef5369c

package/src/scss/components/flex.scss

@@ -29,7 +29,6 @@
 .uk-flex-between { justify-content: space-between; }
 .uk-flex-around { justify-content: space-around; }
 
-
 /* Phone landscape and bigger */
 @media (min-width: $breakpoint-small) {
 
@@ -85,6 +84,46 @@
 .uk-flex-middle { align-items: center; }
 .uk-flex-bottom { align-items: flex-end; }
 
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-flex-stretch\@s { align-items: stretch; }
+    .uk-flex-top\@s { align-items: flex-start; }
+    .uk-flex-middle\@s { align-items: center; }
+    .uk-flex-bottom\@s { align-items: flex-end; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-flex-stretch\@m { align-items: stretch; }
+    .uk-flex-top\@m { align-items: flex-start; }
+    .uk-flex-middle\@m { align-items: center; }
+    .uk-flex-bottom\@m { align-items: flex-end; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-flex-stretch\@l { align-items: stretch; }
+    .uk-flex-top\@l { align-items: flex-start; }
+    .uk-flex-middle\@l { align-items: center; }
+    .uk-flex-bottom\@l { align-items: flex-end; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-flex-stretch\@xl { align-items: stretch; }
+    .uk-flex-top\@xl { align-items: flex-start; }
+    .uk-flex-middle\@xl { align-items: center; }
+    .uk-flex-bottom\@xl { align-items: flex-end; }
+
+}
+
 
 /* Direction
  ========================================================================== */
@@ -95,6 +134,38 @@
 .uk-flex-column { flex-direction: column; }
 .uk-flex-column-reverse { flex-direction: column-reverse; }
 
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-flex-row\@s { flex-direction: row; }
+    .uk-flex-column\@s { flex-direction: column; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-flex-row\@m { flex-direction: row; }
+    .uk-flex-column\@m { flex-direction: column; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-flex-row\@l { flex-direction: row; }
+    .uk-flex-column\@l { flex-direction: column; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-flex-row\@xl { flex-direction: row; }
+    .uk-flex-column\@xl { flex-direction: column; }
+
+}
+
 
 /* Wrap
  ========================================================================== */
@@ -128,7 +199,6 @@
 .uk-flex-first { order: -1;}
 .uk-flex-last { order: 99;}
 
-
 /* Phone landscape and bigger */
 @media (min-width: $breakpoint-small) {
 
@@ -170,6 +240,8 @@
  * Content dimensions, but shrinks
  */
 
+.uk-flex-initial { flex: initial; }
+
 /*
  * No Flex: 0 0 auto
  * Content dimensions
@@ -191,6 +263,42 @@
 
 .uk-flex-1 { flex: 1; }
 
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-flex-initial\@s { flex: initial; }
+    .uk-flex-none\@s { flex: none; }
+    .uk-flex-1\@s { flex: 1; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-flex-initial\@m { flex: initial; }
+    .uk-flex-none\@m { flex: none; }
+    .uk-flex-1\@m { flex: 1; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-flex-initial\@l { flex: initial; }
+    .uk-flex-none\@l { flex: none; }
+    .uk-flex-1\@l { flex: 1; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-flex-initial\@xl { flex: initial; }
+    .uk-flex-none\@xl { flex: none; }
+    .uk-flex-1\@xl { flex: 1; }
+
+}
+
 
 // Hooks
 // ========================================================================

package/src/scss/components/heading.scss

@@ -13,8 +13,8 @@
 // Variables
 // ========================================================================
 
-$heading-small-font-size:                        $heading-small-font-size-m * 0.8 !default;      // 38px 0.73
-$heading-medium-font-size:                       $heading-medium-font-size-m * 0.825 !default;     // 40px 0.714
+$heading-small-font-size:                        $heading-small-font-size-m * 0.8 !default;       // 38px 0.73
+$heading-medium-font-size:                       $heading-medium-font-size-m * 0.825 !default;    // 40px 0.714
 $heading-large-font-size:                        $heading-large-font-size-m * 0.85 !default;      // 50px 0.78
 $heading-xlarge-font-size:                       $heading-large-font-size-m !default;             // 4rem / 64px
 $heading-2xlarge-font-size:                      $heading-xlarge-font-size-m !default;            // 6rem / 96px

package/src/scss/components/slider.scss

@@ -102,7 +102,7 @@
 
 .uk-slider-items > * {
     /* 1 */
-    flex: none;
+    flex: none !important;
     box-sizing: border-box;
     max-width: 100%;
     /* 2 */

package/src/scss/components/width.scss

@@ -26,10 +26,10 @@
 }
 
 .uk-child-width-1-2 > * { width: 50%; }
-.uk-child-width-1-3 > * { width: unquote('calc(100% * 1 / 3.001)'); }
+.uk-child-width-1-3 > * { width: unquote('calc(100% / 3)'); }
 .uk-child-width-1-4 > * { width: 25%; }
 .uk-child-width-1-5 > * { width: 20%; }
-.uk-child-width-1-6 > * { width: unquote('calc(100% * 1 / 6.001)'); }
+.uk-child-width-1-6 > * { width: unquote('calc(100% / 6)'); }
 
 .uk-child-width-auto > * { width: auto; }
 
@@ -51,10 +51,10 @@
 
     .uk-child-width-1-1\@s > * { width: 100%; }
     .uk-child-width-1-2\@s > * { width: 50%; }
-    .uk-child-width-1-3\@s > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@s > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@s > * { width: 25%; }
     .uk-child-width-1-5\@s > * { width: 20%; }
-    .uk-child-width-1-6\@s > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@s > * { width: unquote('calc(100% / 6)'); }
 
     .uk-child-width-auto\@s > * { width: auto; }
     .uk-child-width-expand\@s > :not([class*="uk-width"]) {
@@ -62,6 +62,15 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@s > :not([class*="uk-width"]),
+    .uk-child-width-auto\@s > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 /* Tablet landscape and bigger */
@@ -69,10 +78,10 @@
 
     .uk-child-width-1-1\@m > * { width: 100%; }
     .uk-child-width-1-2\@m > * { width: 50%; }
-    .uk-child-width-1-3\@m > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@m > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@m > * { width: 25%; }
     .uk-child-width-1-5\@m > * { width: 20%; }
-    .uk-child-width-1-6\@m > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@m > * { width: unquote('calc(100% / 6)'); }
 
     .uk-child-width-auto\@m > * { width: auto; }
     .uk-child-width-expand\@m > :not([class*="uk-width"]) {
@@ -80,6 +89,15 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@m > :not([class*="uk-width"]),
+    .uk-child-width-auto\@m > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 /* Desktop and bigger */
@@ -87,10 +105,10 @@
 
     .uk-child-width-1-1\@l > * { width: 100%; }
     .uk-child-width-1-2\@l > * { width: 50%; }
-    .uk-child-width-1-3\@l > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@l > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@l > * { width: 25%; }
     .uk-child-width-1-5\@l > * { width: 20%; }
-    .uk-child-width-1-6\@l > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@l > * { width: unquote('calc(100% / 6)'); }
 
     .uk-child-width-auto\@l > * { width: auto; }
     .uk-child-width-expand\@l > :not([class*="uk-width"]) {
@@ -98,6 +116,15 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@l > :not([class*="uk-width"]),
+    .uk-child-width-auto\@l > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 /* Large screen and bigger */
@@ -105,10 +132,10 @@
 
     .uk-child-width-1-1\@xl > * { width: 100%; }
     .uk-child-width-1-2\@xl > * { width: 50%; }
-    .uk-child-width-1-3\@xl > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@xl > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@xl > * { width: 25%; }
     .uk-child-width-1-5\@xl > * { width: 20%; }
-    .uk-child-width-1-6\@xl > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@xl > * { width: unquote('calc(100% / 6)'); }
 
     .uk-child-width-auto\@xl > * { width: auto; }
     .uk-child-width-expand\@xl > :not([class*="uk-width"]) {
@@ -116,6 +143,15 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@xl > :not([class*="uk-width"]),
+    .uk-child-width-auto\@xl > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 
@@ -137,8 +173,8 @@
 .uk-width-1-2 { width: 50%; }
 
 /* Thirds */
-.uk-width-1-3 { width: unquote('calc(100% * 1 / 3.001)'); }
-.uk-width-2-3 { width: unquote('calc(100% * 2 / 3.001)'); }
+.uk-width-1-3 { width: unquote('calc(100% / 3)'); }
+.uk-width-2-3 { width: unquote('calc(200% / 3)'); }
 
 /* Quarters */
 .uk-width-1-4 { width: 25%; }
@@ -151,8 +187,8 @@
 .uk-width-4-5 { width: 80%; }
 
 /* Sixths */
-.uk-width-1-6 { width: unquote('calc(100% * 1 / 6.001)'); }
-.uk-width-5-6 { width: unquote('calc(100% * 5 / 6.001)'); }
+.uk-width-1-6 { width: unquote('calc(100% / 6)'); }
+.uk-width-5-6 { width: unquote('calc(500% / 6)'); }
 
 /* Pixel */
 .uk-width-small { width: $width-small-width; }
@@ -183,8 +219,8 @@
     .uk-width-1-2\@s { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@s { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@s { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@s { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@s { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@s { width: 25%; }
@@ -197,8 +233,8 @@
     .uk-width-4-5\@s { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@s { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@s { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@s { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@s { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@s { width: $width-small-width; }
@@ -219,6 +255,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@s,
+    .uk-width-1-2\@s,
+    .uk-width-1-3\@s,
+    .uk-width-2-3\@s,
+    .uk-width-1-4\@s,
+    .uk-width-3-4\@s,
+    .uk-width-1-5\@s,
+    .uk-width-2-5\@s,
+    .uk-width-3-5\@s,
+    .uk-width-4-5\@s,
+    .uk-width-1-6\@s,
+    .uk-width-5-6\@s,
+    .uk-width-small\@s,
+    .uk-width-medium\@s,
+    .uk-width-large\@s,
+    .uk-width-xlarge\@s,
+    .uk-width-2xlarge\@s,
+    .uk-width-auto\@s { flex: initial; }
+
 }
 
 /* Tablet landscape and bigger */
@@ -231,8 +287,8 @@
     .uk-width-1-2\@m { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@m { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@m { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@m { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@m { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@m { width: 25%; }
@@ -245,8 +301,8 @@
     .uk-width-4-5\@m { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@m { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@m { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@m { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@m { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@m { width: $width-small-width; }
@@ -267,6 +323,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@m,
+    .uk-width-1-2\@m,
+    .uk-width-1-3\@m,
+    .uk-width-2-3\@m,
+    .uk-width-1-4\@m,
+    .uk-width-3-4\@m,
+    .uk-width-1-5\@m,
+    .uk-width-2-5\@m,
+    .uk-width-3-5\@m,
+    .uk-width-4-5\@m,
+    .uk-width-1-6\@m,
+    .uk-width-5-6\@m,
+    .uk-width-small\@m,
+    .uk-width-medium\@m,
+    .uk-width-large\@m,
+    .uk-width-xlarge\@m,
+    .uk-width-2xlarge\@m,
+    .uk-width-auto\@m { flex: initial; }
+
 }
 
 /* Desktop and bigger */
@@ -279,8 +355,8 @@
     .uk-width-1-2\@l { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@l { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@l { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@l { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@l { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@l { width: 25%; }
@@ -293,8 +369,8 @@
     .uk-width-4-5\@l { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@l { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@l { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@l { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@l { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@l { width: $width-small-width; }
@@ -315,6 +391,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@l,
+    .uk-width-1-2\@l,
+    .uk-width-1-3\@l,
+    .uk-width-2-3\@l,
+    .uk-width-1-4\@l,
+    .uk-width-3-4\@l,
+    .uk-width-1-5\@l,
+    .uk-width-2-5\@l,
+    .uk-width-3-5\@l,
+    .uk-width-4-5\@l,
+    .uk-width-1-6\@l,
+    .uk-width-5-6\@l,
+    .uk-width-small\@l,
+    .uk-width-medium\@l,
+    .uk-width-large\@l,
+    .uk-width-xlarge\@l,
+    .uk-width-2xlarge\@l,
+    .uk-width-auto\@l { flex: initial; }
+
 }
 
 /* Large screen and bigger */
@@ -327,8 +423,8 @@
     .uk-width-1-2\@xl { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@xl { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@xl { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@xl { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@xl { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@xl { width: 25%; }
@@ -341,8 +437,8 @@
     .uk-width-4-5\@xl { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@xl { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@xl { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@xl { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@xl { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@xl { width: $width-small-width; }
@@ -363,6 +459,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@xl,
+    .uk-width-1-2\@xl,
+    .uk-width-1-3\@xl,
+    .uk-width-2-3\@xl,
+    .uk-width-1-4\@xl,
+    .uk-width-3-4\@xl,
+    .uk-width-1-5\@xl,
+    .uk-width-2-5\@xl,
+    .uk-width-3-5\@xl,
+    .uk-width-4-5\@xl,
+    .uk-width-1-6\@xl,
+    .uk-width-5-6\@xl,
+    .uk-width-small\@xl,
+    .uk-width-medium\@xl,
+    .uk-width-large\@xl,
+    .uk-width-xlarge\@xl,
+    .uk-width-2xlarge\@xl,
+    .uk-width-auto\@xl { flex: initial; }
+
 }
 
 /* Intrinsic Widths

package/src/scss/variables-theme.scss

@@ -1288,7 +1288,7 @@ $table-striped-border-width: $global-border-width !default;
 $table-striped-border: $global-border !default;
 $text-meta-link-color: $text-meta-color !default;
 $text-meta-link-hover-color: $global-color !default;
-$internal-text-background-color-gradient: linear-gradient(90deg, $text-background-color 0%, spin($text-background-color, 40%) 100%) !default;
+$internal-text-background-color-gradient: linear-gradient(90deg, $text-background-color 0%, adjust-hue($text-background-color, 40) 100%) !default;
 $thumbnav-item-gradient: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.4)) !default;
 $thumbnav-item-hover-opacity: 0 !default;
 $thumbnav-item-active-opacity: 0 !default;

package/tests/slider.html

@@ -41,6 +41,11 @@
                     <option value="0">Single</option>
                     <option value="1">Sets</option>
                 </select>
+                <select id="js-active-switcher" class="uk-select uk-form-width-small" aria-label="Active switcher">
+                    <option value="">All</option>
+                    <option value="first">First</option>
+                    <option value="center">Center</option>
+                </select>
             </div>
 
             <h2>Content Widths</h2>
@@ -577,6 +582,12 @@
                             <td>0</td>
                             <td>Slider item to show. 0 based index.</td>
                         </tr>
+                        <tr>
+                            <td><code>active</code></td>
+                            <td>String</td>
+                            <td>all</td>
+                            <td>Slider item/items to apply the transition active class to (all|first).</td>
+                        </tr>
                         <tr>
                             <td><code>pause-on-hover</code></td>
                             <td>Boolean</td>
@@ -646,7 +657,7 @@
         <script>
 
             const {attr, $$, on} = UIkit.util;
-            for (const attribute of ['finite', 'center', 'sets']) {
+            for (const attribute of ['finite', 'center', 'sets', 'active']) {
                 on(`#js-${attribute}-switcher`, 'change', e =>
                     attr($$('[uk-slider]'), attribute, e.target.value)
                 );

package/tests/slideshow.html

@@ -105,14 +105,14 @@
                                     </div>
                                 </li>
                                 <li>
-                                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
+                                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen loading="lazy" uk-cover></iframe>
                                     <div class="uk-position-center uk-position-small uk-text-center">
                                         <h2 uk-slideshow-parallax="x: 100,-100">YouTube</h2>
                                         <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                                     </div>
                                 </li>
                                 <li>
-                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen uk-cover></iframe>
+                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen loading="lazy" uk-cover></iframe>
                                     <div class="uk-position-center uk-position-small uk-text-center">
                                         <h2 uk-slideshow-parallax="x: 100,-100">Vimeo</h2>
                                         <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>