Вопрос

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

Это было полезно?

Решение 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">

Другие советы

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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top