Why on my page with youtube video scrolling of my page does not work?

Discussion in 'JavaScript' started by mstdmstd, Jul 15, 2023.

  1. #1
    On my page of laravel 8 / blade / jquery 3.6 I show youtube video by youtube_key field I got from server :


    <iframesrc="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>
    PHP:

    and opened page show youtube video ok, but when I try to scroll up or down scrolling with a mouse wheel on my page does not work at all. If I click out of video area then scrolling of my page works ok

    If I click 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 ?

    Seems that is standard behaviour for a page with an iframe.

    Are there some decisions/jquery compatible libs to salve this issue ?


    I use Google Chrome Version 114.0.5735.90 (Official Build) (64-bit)
     
    mstdmstd, Jul 15, 2023 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    It's an iframe, when it has the "focus" it's the target of scrolling. Not a lot you can do about it when it comes to iframe driven videos... well, you might be able to use JavaScript to blur() it a short delay after onfocus fires, but that might be fragile.

    Though I think you're missing a space. Should be "<iframe src" not "<iframesrc"
     
    deathshadow, Jul 21, 2023 IP