0

I use the fullPage.js library for a site that displays full page (not full screen) videos. Ie. the video makes up all the browser real estate without borders, even if the browser proportions does not match the aspect ratio of the video.

The problem is, full page videos (also without the fullpage.js library) does not work in Firefox. You can see the official example her:

http://alvarotrigo.com/fullPage/examples/videoBackground.html

I have tried setting the video height with CSS but it changes the full height including the borders.

Apparently there is a difference in CSS handling of video sizes in Chrome vs Firefox.

Can anybody suggest a fix for this problem? CSS or Javascript, if needed.

marlar
  • 3,858
  • 6
  • 37
  • 60
  • I would change the title to the question as it is not related with fullPage.js. Try to create a full page video without fullPage.js and you'll find the same problem. Make things easier for people to answer. Not everybody is familiarized with fullPage.js, adding that info is unnecessary to solve the issue. – Alvaro Feb 11 '15 at 12:58
  • The title is actually pretty generic as it only mentions full page videos. It does not mention fullpage.js. However, I have changed the question details a bit. – marlar Feb 11 '15 at 21:34

1 Answers1

0

I found an answer here: scale HTML5 Video and break aspect ratio to fill whole site

The trick is to use CSS transform:scaleY to scale the video based on the proportions of the browser window.

Community
  • 1
  • 1
marlar
  • 3,858
  • 6
  • 37
  • 60