Merge pull request #414 from UX-Alkosto/develop

Develop

components/banner-video/css/index.js

@@ -1,6 +1,16 @@
 import { css } from 'lit';
 
 const styles = css`
+.full .lazy-iframe,
+.left .lazy-iframe,
+.left-cut .lazy-iframe,
+.right .lazy-iframe,
+.right-cut .lazy-iframe {
+    max-width: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
 .full iframe,
 .left iframe,
 .left-cut iframe,

components/banner-video/index.js

@@ -18,8 +18,34 @@ export class BannerVideo extends Banner {
 	}
 	_getIframe({height, src, type}) {
 		if (!src.length) return;
-		return html`<section class="${type}">
-            <iframe allowfullscreen frameborder="0" height="${height}" src="${src}" loading="lazy"> </iframe>
-        </section>`;
+		return html`<section class="${type}">${this.lazyIframe({height, src})}</section>`;
+	}
+	lazyIframe({height, src}) {
+		// check if the browser supports IntersectionObserver
+		if ('IntersectionObserver' in window) {
+			// create a new IntersectionObserver
+			const observer = new IntersectionObserver(entries => {
+				// loop through the entries
+				entries.forEach(({ isIntersecting, target }) => {
+					// if the element is visible
+					if (isIntersecting) {
+						// add the iframe
+						const iframe = document.createElement('iframe');
+						iframe.allowFullscreen = true;
+						iframe.height = height;
+						iframe.src = src;
+						iframe.loading = 'lazy';
+						iframe.frameBorder = '0';
+						this.shadowRoot.querySelector('.lazy-iframe').appendChild(iframe);
+						// stop watching this element
+						observer.unobserve(target);
+					}
+				});
+			});
+			// start watching the element
+			observer.observe(this);
+			// return a placeholder
+			return html`<div class="lazy-iframe"></div>`;
+		}
 	}
 }

dist/components.js

@@ -1,2 +1,2 @@
-/*! webcomponents release: 2.0.7 */
-import"./webcomponents-2.0.7-2def456f.js";
+/*! webcomponents release: 2.1.0 */
+import"./webcomponents-2.1.0-c115f97e.js";