POP UP Video still playing in the background

[schlumpumpie]

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

[Acorn]

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

[schlumpumpie]

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"

[schlumpumpie]

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>

[Acorn]

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:

<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

[graniteleague]

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.

[schlumpumpie]

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