Question

Scenario

My page p1 contains an iframe. The iframe points to a page p2 containing an embedded video from youtube.

Problem

The problem is that if I scroll (by mouse) the page inside the iframe, it scrolls normally only if the mouse cursor isn't on a youtube embdedded video.

But if the mouse cursor is on a youtube embedded video, the page p2 inside the iframe stops to scroll, while the external page p1 starts to scroll.

How can avoid this no normal behaviour?

I expect that even if the mouse cursor is on the youtube embedded video, the page inside the iframe continues to scroll normally, and it doesn't loose the mousewheel event.

Failed solutions

I tried to add the attribute wmode="transparent" to the iframe tag of youtube embedded video, but it doesn't solve the problem.

Details

To scroll inside the iframe I'm using a plugin that substitues the scrollbar.

Demo

You can find the demo here. Open it with Firefox and scroll with the mouse inside the iframe

Was it helpful?

Solution 2

Found a solution, got observing Facebook code.

Basically, instead of using iframe to embed youtube video, I'm using the <embed> tag, like the following code:

<embed  wmode="opaque" salign="tl" allowscriptaccess="never" allowfullscreen="true" scale="scale" quality="high" bgcolor="#FFFFFF" name="swf_u_jsonp_2_2b" id="swf_u_jsonp_2_2b" style="display: block;" src="https://www.youtube.com/v/XvLAKrVbCBM?version=3&autohide=1" type="application/x-shockwave-flash">

OTHER TIPS

I didn't find a solution, other than that suggested by @Kaarel Kont-Kontson. If I put a div in top of the video the user can play the video and can scroll even if the mouse cursor in on the video.

Specifically, the following is the div to display a single video:

<div style="position:relative; height:200px; width:200px;">
        <iframe style="position:absolute;width:100%;height:100%;z-index:-10;" src="//youtube.com/embed/dooCQdg9-NA"></iframe>
        <div style="height:100%;width:100%;position:absolute;z-index:20;"></div>
    </div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top