28

I seem to have the opposite problem of everyone else with iframes and scrolling. I need the iframe (contains a youtube video) to NOT prevent scrolling of the main document. If I hover my mouse over it, the page won't scroll with the scroll wheel, and according to the latest chrome canary simulation of touch devices, I can't put my finger on the frame and scroll the main document either. Any way to stop this? My CSS is below:

.GalleryVideoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
width:95%;
margin:auto;
display:block;
 }

.GalleryVideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
 }

5 Answers 5

21
+150

The question is unclear, so I went into some detail below on various ways to achieve this effect and how it works.

If you don't need to interact with the iframe, the quick and dirty solution is to use pointer-events: none;. This will put the iframe on the page, and not allow it to scroll. However, it also does not allow you to click on it. This obviously won't work for a YouTube video, but it is important to know this is an option.

If you need to interact with the iframe, either to play a video or click a link, all you need to do is make sure the iframe is large enough to display the full contents. I'm unsure what specific problem OP was encountering as we don't have their HTML, but if you scroll and the iframe is not also trying to scroll, it will not prevent the parent from scrolling.

Basically, if you have your cursor over an iframe and you scroll, the iframe will receive the event first. If it does not need to scroll (either it can't or it has already reached the bottom of the iframe) the event will be propagated to the parent.

Finally, if you have an iframe that you need to be scrollable, but you want to scroll the parent while the cursor is on the iframe, you are out of luck. There is no way to inform the iframe that sometimes the user wants to scroll the whole page. This is simply how iframes work. You can either remove the cursor from the iframe to scroll, or scroll to the bottom of the iframe and continue down the page.

Using a YouTube video and the CSS in the question, I've included a demo for you to see. I also included two identical iframes that are scrollable and applied pointer-events: none; to one to demonstrate how it works.

.tall {
  height: 1500px;
}

.GalleryVideoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  width: 95%;
  margin: auto;
  display: block;
}

.GalleryVideoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.scrolling-iframe {
  margin-top: 35px;
  display: inline-block;
  height: 500px;
}

.no-scroll {
  pointer-events: none;
}
<div class="tall">
  <div class="GalleryVideoWrapper">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/hzB53YL78rE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
  <iframe class="scrolling-iframe" src="https://www.wikipedia.org/" frameborder="1"></iframe>
  <iframe class="scrolling-iframe no-scroll" src="https://www.wikipedia.org/" frameborder="1"></iframe>
</div>

3
  • 1
    Thanks! This was exactly what I needed.
    – McCuz
    Feb 19, 2018 at 7:37
  • 1
    The point is you just need to add pointer-events: none in css..
    – Mark
    Apr 1, 2020 at 11:10
  • 2
    Well now we can't click anything in the frame though... so it isn't a viable solution. For me at least.
    – Dois
    May 18, 2020 at 2:52
4

There used to be a scrolling attribute, but it is deprecated in html5. try this:

iframe {
    overflow: hidden;
}

Don't forget to set your width and height somewhere!

If you wanted to try the iframe scrolling attribute, you could like this:

<iframe src="blah.html" width="200" height="200" scrolling="no"></iframe>

See working example here: http://jsfiddle.net/4dt4zhwt/1/

6
  • I can get the scroll wheel to work with chrome in Linux and Windows. This might be a firefox bug.
    – photocode
    Nov 23, 2014 at 2:28
  • Are you still seeing a scrollbar? try setting the height to something larger. Nov 23, 2014 at 2:34
  • IE and opera are no-go as well :(
    – photocode
    Nov 23, 2014 at 2:34
  • sorry you are having trouble. this is working in ie, firefox and chrome for me. On OSX and Windows. Good luck. Nov 23, 2014 at 2:38
  • Hey, your fiddle works... I'm using fitfid.js to scale the video. Is there a way to set height that will work with this script?
    – photocode
    Nov 23, 2014 at 3:15
4

I had horizontal-scrolling disabled like so:

html, body {
    overflow-x: hidden
}

On a page with an iframe, if I tried to scroll the page vertically by touching and moving the iframe on Safari for iPad or iPhone, I couldn't.

This fixed it for me:

* {
    -webkit-overflow-scrolling: touch
}
1

I don't know if you have found a way around this, but I had the same problem where all iframes (twitter, facebook and youtube) in my site was preventing the page itself from scrolling. After a lot of debugging and coffee, I found it, in my case at least, It was down to an overflow-x: hidden hidden I had set on a form element 4/5 parents up. Removing the overflow property fixed the issue for me, Hope it works for you!

1
  • I only have this problem on iPhone/iPad Safari and this worked for me! I have html,body { overflow-x: hidden }, because I have hidden content off screen and don't want users to see it. My iFrame won't allow the touchmove event to scroll the page unless I remove that style! I will try to go from here. Thanks May 19, 2016 at 14:24
0

I had an iframe in full width (with a Vimeo video inside) and it prevents the page scrolling.

Here is how I solved this issue :

<div class="video">

    <iframe src="path-to-video"></iframe>

</div>


.video iframe {
    pointer-events: none;
}

More info on this css property : https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.