Welcome to TalkGraphics.com
Results 1 to 7 of 7
  1. #1
    Join Date
    Nov 2023
    Posts
    11

    Default POP UP Video still playing in the background

    Hello everyone,
    I have a problem with a POP UP video.
    I have no problems inserting videos so far. For the video I use a placeholder in which I write the code from Youtube into the body. But with the POP UP I have the following problem.
    When I close the POP UP video without stopping the video, I can still hear the video playing. I have to open the pop up again, stop the video and then close the pop up. Is there a way to make the pop-up video stop as soon as the pop-up is closed without stopping the video in the player first?
    that would be great if you could help me

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,368

    Default Re: POP UP Video still playing in the background

    I have had success when adding loading="lazy" as an additional parameter.
    Basically, if you move the video off-screen the video is paused until the video becomes visible again.
    On closing a pop-up layer, the video is reset to the start. Just do use autostart.

    https://www.talkgraphics.com/showthr...339#post650339

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  3. #3
    Join Date
    Nov 2023
    Posts
    11

    Default Re: POP UP Video still playing in the background

    Hi Acorn,
    thanks for your support but i think I`m doing something wrong.
    either nothing happens (the same problem as before) or the video does not start at all or is not visible when I press the trigger.

    this is my YT- iframe :
    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XXXXXXXXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
    </iframe>
    how it should be installed? if i add lazy="loading" nothing changes. and with "display: none or visibility: hidden applied." the Pop Up donīt start and itīs not visible.
    Hmmmmm
    loading="lazy"
    Last edited by schlumpumpie; 15 December 2023 at 02:40 PM.

  4. #4
    Join Date
    Nov 2023
    Posts
    11

    Default Re: POP UP Video still playing in the background

    a solution!!!
    Ok I was desperate and thought maybe chatGPT has a solution.
    YES!!! ChatGPT wrote me a script and it works great!!!
    .
    For all who might have such a problem the script to copy

    after the iframe

    <script>
    // Function to check if an element is in the viewport
    function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
    }

    // Function to stop the YouTube video
    function stopYouTubeVideo() {
    var iframe = document.getElementById('youtubeFrame');
    var src = iframe.src;
    iframe.src = src; // Setting the same src stops the video
    }

    // Intersection Observer to monitor visibility changes
    var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
    if (entry.isIntersecting) {
    // Element is in the viewport, play the video or perform any other actions
    } else {
    // Element is not in the viewport, stop the video
    stopYouTubeVideo();
    }
    });
    }, { threshold: 0.5 }); // Adjust the threshold as needed

    // Start observing the YouTube iframe
    var youtubeFrame = document.getElementById('youtubeFrame');
    observer.observe(youtubeFrame);
    </script>

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    18,368

    Default Re: POP UP Video still playing in the background

    Quote Originally Posted by schlumpumpie View Post
    Hi Acorn,
    thanks for your support but i think I`m doing something wrong.
    either nothing happens (the same problem as before) or the video does not start at all or is not visible when I press the trigger.

    this is my YT- iframe :
    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XXXXXXXXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
    </iframe>
    how it should be installed? if i add lazy="loading" nothing changes. and with "display: none or visibility: hidden applied." the Pop Up donīt start and itīs not visible.
    Hmmmmm
    loading="lazy"
    Well, what you provided errors either because it is not a real video or the added -nocookie actually requires a YT account that is published following GDPR compliance.
    YT suggest no cookies are then used but tracking still continues in LocalStorage - this a another matter.

    The correct parameter and value is loading="lazy" or loading ='lazy'.

    Here is my embed:
    Code:
    <iframe width="1023" height="575" src="https://www.youtube.com/embed/ErMSHiQRnc8" title="Animation vs. Physics" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>
    I normally set my dimensions to 100%; I'll leave that to you.

    All this will do is not load the video until the pop-up is opened.

    I think that hiding off-screen will not work for YT.
    YT changes coding all the time so instead of chasing what used to work, which I have been doing this afternoon, it will be better to adopt another approach.

    Browsers have changed too so few will now allow autostart without a user activation, especially if there is a sound track.
    What used to work was adding the parameter mute=1, but I believe this too is now not working.

    I have scrubbed the pop-up layer for this demo file: JS - YT external Stop Start controls.xar
    What is does is toggle in and out the embed URL.
    The IFRAME now has an ID. The Page Body has the JavaScript to do the toggling. The Red & Green buttons invoke the JS function calls.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Dec 2023
    Posts
    2

    Default Re: POP UP Video still playing in the background

    Quote Originally Posted by schlumpumpie View Post
    Hi Acorn,
    thanks for your support but i think I`m doing something wrong.
    either nothing happens (the same problem as before) or the video does not start at all or is not visible when I press the trigger.

    this is my YT- iframe : survivor io
    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XXXXXXXXXXXXXX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
    </iframe>
    how it should be installed? if i add lazy="loading" nothing changes. and with "display: none or visibility: hidden applied." the Pop Up donīt start and itīs not visible.
    Hmmmmm
    loading="lazy"
    So cool. I didn't expect to be able to add loading="lazy" so that the video pauses when moving off the screen. Much more convenient than before. I tried following your command file and it works great! Thank you.

  7. #7
    Join Date
    Nov 2023
    Posts
    11

    Default Re: POP UP Video still playing in the background

    thanks again for the support.
    here the example with the hidden YT video (own solution), which should appear as a popup and stop playing when it is hidden again. here i had to insert a script into the popup and give the iframe an id. my problem was that it didn't want to stop playing when the popup was closed. you could still hear the sound. but now it works well
    Attached Files Attached Files
    Last edited by schlumpumpie; 20 December 2023 at 01:27 AM.

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •