Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Why on my page with youtube video scrolling of my page does not work?

Posted by: nilovsergey Jul 16 2023, 09:23 AM

On my page I show youtube video by youtube_key field I got from server :

CODE
    <iframe
            src="https://www.youtube.com/embed/{{ $news->youtube_key }}"
            title="YouTube video player" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen></iframe>

and opened page show youtube video ok, but when I try to scroll up or down scrolling on my page does not work at all.
If I ckick out of video area then scrolling of my page works ok
If I ckick inside of video area then scrolling of my page DOES NOT work.
If there is a way to make scrolling of my page working always ?

Posted by: Darin McGrew Jul 16 2023, 07:43 PM

That's the way iframes work. When the focus is on the iframe, the iframe scrolls. When the focus is outside of the iframe, the page scrolls.

Posted by: nilovsergey Jul 16 2023, 11:18 PM

QUOTE(Darin McGrew @ Jul 16 2023, 07:43 PM) *

That's the way iframes work. When the focus is on the iframe, the iframe scrolls. When the focus is outside of the iframe, the page scrolls.

Thank you for your feedback! If there is a way to show youtube video without iframe? Maybe some external libraries compatible with jquery 3.6 ?

Posted by: Christian J Jul 17 2023, 04:30 AM

QUOTE(Darin McGrew @ Jul 16 2023, 07:43 PM) *

That's the way iframes work. When the focus is on the iframe, the iframe scrolls.

But only if the iframe has scrollbars; if it's large enough to contain the framed content, no scrollbars will appear and the whole page should scroll even with the focus on the iframe (unless videos work different from framed pages?).

QUOTE(nilovsergey @ Jul 17 2023, 06:18 AM) *

If there is a way to show youtube video without iframe?

With the VIDEO element?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)