Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Adam Smallman
Adam Smallman
4,182 Points
Posted by Adam Smallman
Adam Smallman
4,182 Points

Embedded youtube video for mobile devices. I need help!

I have made a site that works perfect, the only problem is when I view it on mobile phone. I cannot scroll down over the embedded youtube video!!

I know its the video because I have deleted it and you can scroll down. The page wont scroll only if you place your finger on the video.

How can I fix this ?

Thanks

Adam

3 Answers

Jose Fremaint
Jose Fremaint
2,885 Points
Jose Fremaint
Jose Fremaint
2,885 Points

First you have to put the IFRAME inside a DIV and then style the DIV and the IFRAME with css.

Example:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
Adam Smallman
Adam Smallman
4,182 Points
Adam Smallman
Adam Smallman
4,182 Points

Hello Jose,

I have copied your code exactly, but its still not working.

I still cant scroll down on mobile phone.
Here is a link to the website http://tomshilcockcreative.com/showreel.php

On a desktop you can scroll down but not on mobile phone. I have placed a long red div under the video.

Jose Fremaint
Jose Fremaint
2,885 Points
Jose Fremaint
Jose Fremaint
2,885 Points

Add this css code to the parent DIV.

-webkit-overflow-scrolling:touch;
Adam Smallman
Adam Smallman
4,182 Points
Adam Smallman
Adam Smallman
4,182 Points

Still didn't work its really frustrating

any idea ?

Jose Fremaint
Jose Fremaint
2,885 Points
Jose Fremaint
Jose Fremaint
2,885 Points

Maybe somebody with more experience will help, but I will keep searching.

Dave Hallett
Dave Hallett
5,257 Points
Dave Hallett
Dave Hallett
5,257 Points

I've got exactly the same problem and have been looking online for answers for 2 days now. Has anyone managed to find a solution for this ?