Full Screen Video Intro HTML5?

Question

Ok so I need to have a video load full screen as an intro to a website. Can I do this in HTML5 or do I need to use flash?

Can someone please explain or point me to some good resources on how to do this.

I need to website to load and the 5 second clip to play through with no player controls or anything and then go straight through to the main site.

Exactly like this example: http://www.firecrackerfilms.com/

Thanks :)

Solution 1

If you need to set a background video try this

Use position:fixed on the video, set it to 100% width/height, and add a negative z-index on it so it appears behind everything.

If you look at VideoJS, the controls are just html elements.

HTML

<video id="background" src="video.mp4" autoplay>

CSS

#video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}

Solution 2

The page in your example isn't full-screen, nor is it even full-viewport, it's a small video with a black background that blends into the page's black background. If you can get away with doing that, that will work.

If you care, you will never be able to auto-play an HTML5 video intro on iPad, because iOS inhibits autoload and autoplay unless they are triggered by a finger touching the screen. But then again, it can't play Flash anyway.

If you want an HTML5 video to be full-viewport, for, say, a 16:9 video viewed in a 4:3 monitor, you will make the video full-height and lose the sides of the video. Similarly for the reverse case. This will maintain the video's aspect ratio with the caveat that you lose part of the video content to hidden overflow.

If you don't care about aspect ratio, you can make the video height: 100% and width: 100%, as @coder suggests.

For this reason, it's probably easier to go with what they did on your example site, and make the video blend into the background.

Comments

[msanford]

+1 As I've done this a few times, but the problem is that you lose the video's aspect ratio as you force it to adapt to the viewport. The solution I propose maintains aspect, with the caveat that some of the video is lost. In my experience, both may be acceptable solutions, it just depends on your video content.

[msanford]

Just mentioning for the sake of completeness :)