I have the video player set up to take up the full width, and keep a 16:9 aspect ratio. This part works, but it leaves an additional ~10px of space below the player.
Where are these extra pixels coming from and how do I remove them?
See here:
http://tinyurl.com/pwpf38a
Try adding "overflow: hidden;" to the body.
This didn't affect it. The spacing is still there.
Refresh your browser cache. When I visit your page now, the extra margin is gone. I'll post a screenshot if you don't believe me!
What this does is it takes the scroll bar off of the page, so you don't see the bottom of the page (it even cuts off some of the player). You can still scroll down there and see it when you click and move your mouse's scroll wheel; the spacing remains.
The spacing is also completely still there on Android Chrome, which is what we are targeting.
Any other ideas?
Yeah, I see what you mean. Just a lucky accident that on my monitor, with the browser maximized, it fits perfectly. More tinkering needed....
I’m not seeing that issue: http://cl.ly/image/2j3z2j3x0S2r
Cooper
Cooper, your screenshot doesn't show the bottom of the page (where the issue is). Your video is being cropped as I mentioned in my last post - this was an attempt to fix the problem.
I removed the body's overflow:hidden, so you can more easily see the issue by scrolling to the bottom.
I'd like to see someone from JW Player post a simple code sample that causes a video to fill the browser viewport, with no cropping and no excess margins. That would mean stretching the video to fill, of course. I've tried every trick I can think of, and can't quite get there.
Take a look at this demo I put together:
http://qa.jwplayer.com/~cooper/fullscreen.html
-Cooper
Cooper,
I added the position:fixed div, and it works now on my test Android device.
I am seeing cropping issues on my desktop browser, but I'm not sure if this issue will ever arise in production. I'll be sure to do more testing, and if I have more issues I will let you know.
Thanks for the help!
Very good! But as I suspected, probably not possible without resorting to some Javascript finagling.
It appears that you don't really need all the "normalize" CSS stuff - as far as I can tell, just setting the body margins to zero is sufficient. In fact, I don't think you need the wrapping <div> around the player at all (with position: fixed, etc.).
Yeah, I think that’s a pretty good solution. Works nicely for me in all of my Desktop browsers on Mac.
Cooper
I've added it to my demo site, and it appears to work without the wrapping <div>:
http://misterneutron.com/JW6videoFullframe/
(Perhaps unrelated, but I've been having problems with videos on my site, and can't figure out whether it's a hosting problem, an ISP problem, a cable modem problem, etc. Does this video start quickly when you hit the "Play" button, or is there a long, long delay before it gets going?)
The video started instantly when I just tried to view it -
Cooper
