Skip to content

Instantly share code, notes, and snippets.

@aytacmalkoc

aytacmalkoc/iframe-api.js

Last active November 1, 2023 08:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aytacmalkoc/722e7f7a7f179e0187e2494330c6db2b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aytacmalkoc/722e7f7a7f179e0187e2494330c6db2b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. aytacmalkoc revised this gist Nov 1, 2023. 1 changed file with 46 additions and 48 deletions.
    94 changes: 46 additions & 48 deletions observer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,60 +1,58 @@
    let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.2
    };

    function videoObserver(){
    let callback = (entries, observer) => {
    entries.forEach(entry => {
    if (entry.intersectionRatio >= 0.2) {
    entry.target.play();
    }
    else {
    entry.target.pause();
    }
    });
    }

    let observer = new IntersectionObserver(callback, options);
    const videos = document.querySelectorAll("video");

    videos.forEach(vide => {
    observer.observe(vide);
    root: null,
    rootMargin: '0px',
    threshold: 0.2
    };

    function videoObserver(){
    let callback = (entries, observer) => {
    entries.forEach(entry => {
    if (entry.intersectionRatio >= 0.2) {
    entry.target.play();
    }
    else {
    entry.target.pause();
    }
    });
    }

    function iframeObserver() {
    let callback = (entries, observer) => {
    entries.forEach(entry => {
    let url = new URL(entry.target.src)
    let observer = new IntersectionObserver(callback, options);
    const videos = document.querySelectorAll("video");

    if(url.hostname === 'www.youtube.com') {
    id = url.pathname.split('/').pop()
    videos.forEach(vide => {
    observer.observe(vide);
    });
    }

    entry.target.setAttribute('id', id)
    function iframeObserver() {
    let callback = (entries, observer) => {
    entries.forEach(entry => {
    let url = new URL(entry.target.src)

    if (entry.intersectionRatio >= 0.2) {
    console.log('start', id)
    callPlayer(id, 'playVideo')
    }
    else {
    console.log('stop', id)
    callPlayer(id, 'pauseVideo')
    }
    }
    });
    }
    if(url.hostname === 'www.youtube.com' && url.searchParams.has('enablejsapi') && url.searchParams.has('enablejsapi') === "1") {
    id = url.pathname.split('/').pop()

    let observer = new IntersectionObserver(callback, options);
    const iframes = document.querySelectorAll("iframe");
    entry.target.setAttribute('id', id)

    iframes.forEach(iframe => {
    observer.observe(iframe);
    if (entry.intersectionRatio >= 0.2) {
    callPlayer(id, 'playVideo')
    }
    else {
    callPlayer(id, 'pauseVideo')
    }
    }
    });
    }

    window.addEventListener('load', () => {
    videoObserver();
    iframeObserver();
    })
    let observer = new IntersectionObserver(callback, options);
    const iframes = document.querySelectorAll("iframe");

    iframes.forEach(iframe => {
    observer.observe(iframe);
    });
    }

    window.addEventListener('load', () => {
    videoObserver();
    iframeObserver();
    })
  2. aytacmalkoc created this gist Nov 1, 2023.
    90 changes: 90 additions & 0 deletions iframe-api.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,90 @@
    /**
    * @author Rob W <[email protected]>
    * @website https://stackoverflow.com/a/7513356/938089
    * @version 20190409
    * @description Executes function on a framed YouTube video (see website link)
    * For a full list of possible functions, see:
    * https://developers.google.com/youtube/js_api_reference
    * @param String frame_id The id of (the div containing) the frame
    * @param String func Desired function to call, eg. "playVideo"
    * (Function) Function to call when the player is ready.
    * @param Array args (optional) List of arguments to pass to function func*/
    function callPlayer(frame_id, func, args) {
    if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
    var iframe = document.getElementById(frame_id);
    if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
    }

    // When the player is not ready yet, add the event to a queue
    // Each frame_id is associated with an own queue.
    // Each queue has three possible states:
    // undefined = uninitialised / array = queue / 0 = ready
    if (!callPlayer.queue) callPlayer.queue = {};
    var queue = callPlayer.queue[frame_id],
    domReady = document.readyState == 'complete';

    if (domReady && !iframe) {
    // DOM is ready and iframe does not exist. Log a message
    window.console && console.log('callPlayer: Frame not found; id=' + frame_id);
    if (queue) clearInterval(queue.poller);
    } else if (func === 'listening') {
    // Sending the "listener" message to the frame, to request status updates
    if (iframe && iframe.contentWindow) {
    func = '{"event":"listening","id":' + JSON.stringify(''+frame_id) + '}';
    iframe.contentWindow.postMessage(func, '*');
    }
    } else if ((!queue || !queue.ready) && (
    !domReady ||
    iframe && !iframe.contentWindow ||
    typeof func === 'function')) {
    if (!queue) queue = callPlayer.queue[frame_id] = [];
    queue.push([func, args]);
    if (!('poller' in queue)) {
    // keep polling until the document and frame is ready
    queue.poller = setInterval(function() {
    callPlayer(frame_id, 'listening');
    }, 250);
    // Add a global "message" event listener, to catch status updates:
    messageEvent(1, function runOnceReady(e) {
    if (!iframe) {
    iframe = document.getElementById(frame_id);
    if (!iframe) return;
    if (iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
    if (!iframe) return;
    }
    }
    if (e.source === iframe.contentWindow) {
    // Assume that the player is ready if we receive a
    // message from the iframe
    clearInterval(queue.poller);
    queue.ready = true;
    messageEvent(0, runOnceReady);
    // .. and release the queue:
    while (tmp = queue.shift()) {
    callPlayer(frame_id, tmp[0], tmp[1]);
    }
    }
    }, false);
    }
    } else if (iframe && iframe.contentWindow) {
    // When a function is supplied, just call it (like "onYouTubePlayerReady")
    if (func.call) return func();
    // Frame exists, send message
    iframe.contentWindow.postMessage(JSON.stringify({
    "event": "command",
    "func": func,
    "args": args || [],
    "id": frame_id
    }), "*");
    }
    /* IE8 does not support addEventListener... */
    function messageEvent(add, listener) {
    var w3 = add ? window.addEventListener : window.removeEventListener;
    w3 ?
    w3('message', listener, !1)
    :
    (add ? window.attachEvent : window.detachEvent)('onmessage', listener);
    }
    }
    60 changes: 60 additions & 0 deletions observer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.2
    };

    function videoObserver(){
    let callback = (entries, observer) => {
    entries.forEach(entry => {
    if (entry.intersectionRatio >= 0.2) {
    entry.target.play();
    }
    else {
    entry.target.pause();
    }
    });
    }

    let observer = new IntersectionObserver(callback, options);
    const videos = document.querySelectorAll("video");

    videos.forEach(vide => {
    observer.observe(vide);
    });
    }

    function iframeObserver() {
    let callback = (entries, observer) => {
    entries.forEach(entry => {
    let url = new URL(entry.target.src)

    if(url.hostname === 'www.youtube.com') {
    id = url.pathname.split('/').pop()

    entry.target.setAttribute('id', id)

    if (entry.intersectionRatio >= 0.2) {
    console.log('start', id)
    callPlayer(id, 'playVideo')
    }
    else {
    console.log('stop', id)
    callPlayer(id, 'pauseVideo')
    }
    }
    });
    }

    let observer = new IntersectionObserver(callback, options);
    const iframes = document.querySelectorAll("iframe");

    iframes.forEach(iframe => {
    observer.observe(iframe);
    });
    }

    window.addEventListener('load', () => {
    videoObserver();
    iframeObserver();
    })