https://medicalindustrytoday.com/js/controllers/lazyYoutubeControl…?v9e91e12689728780f01d6dd9a70eb5c9bae56d64

1import { Controller } from "../stimulus.js";
2
3export default class extends Controller {
4  static values = { src: String };
5  static targets = ["frame"];
6
7  connect() {
8    if (!this.hasFrameTarget || !this.srcValue) return;
9
10    this.observer = new IntersectionObserver((entries) => {
11      for (const entry of entries) {
12        if (!entry.isIntersecting) continue;
13        this.load();
14        break;
15      }
16    }, { rootMargin: "200px" });
17
18    this.observer.observe(this.frameTarget);
19  }
20
21  disconnect() {
22    if (this.observer) {
23      this.observer.disconnect();
24      this.observer = null;
25    }
26  }
27
28  load() {
29    if (this.loaded) return;
30    this.loaded = true;
31
32    const iframe = document.createElement("iframe");
33    iframe.src = this.srcValue;
34    iframe.title = this.frameTarget.dataset.title || "";
35    iframe.className = this.frameTarget.dataset.iframeClass || "";
36    iframe.setAttribute("allow",
37      "accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
38    iframe.allowFullscreen = true;
39
40    this.frameTarget.replaceWith(iframe);
41    this.disconnect();
42  }
43}