Menu icon Foundation
Implementing full screen html5 video

Hi everyone
I just got started with foundation and so far everything works great but I would like to implement an existing site into the framework but haven't found a way to do that yet

basically I would like to port this site this http://twentyonemedia.com/ to foundation that it looks exactly the same but with a top menu bar.
It would be great if you could help me with that.

Here is the code I've been using so far
CSS

#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}

#video_pattern {
background-image: url(../images/pattern.png);
position: fixed;
opacity: 0.8;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
            

         

<div id="video_pattern" ></div>

    <video id="video_background" preload="auto" autoplay loop muted volume="0">
			<source src="videos/splash.ogg" type="video/ogg ogv"; codecs="theora, vorbis"/>
			<source src="videos/splash.mp4" type="video/mp4"/>
	</video>
            

         

html5Videofull screen

Hi everyone
I just got started with foundation and so far everything works great but I would like to implement an existing site into the framework but haven't found a way to do that yet

basically I would like to port this site this http://twentyonemedia.com/ to foundation that it looks exactly the same but with a top menu bar.
It would be great if you could help me with that.

Here is the code I've been using so far
CSS

#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}

#video_pattern {
background-image: url(../images/pattern.png);
position: fixed;
opacity: 0.8;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
            

         

<div id="video_pattern" ></div>

    <video id="video_background" preload="auto" autoplay loop muted volume="0">
			<source src="videos/splash.ogg" type="video/ogg ogv"; codecs="theora, vorbis"/>
			<source src="videos/splash.mp4" type="video/mp4"/>
	</video>
            

         
Rafi Benkual about 5 years ago

This is not a built in feature of Foundation, but it's possible.

http://davidwalsh.name/fullscreen

Just use it with care as it can be a pretty frustrating pattern.

Tony about 5 years ago

Thanks for the info but it's not really what I was looking for.
I don't need to have the page full screen on the monitor it just needs to cover the whole page as background.

EDIT:
I actually found a way thanks to this thread
http://foundation.zurb.com/forum/posts/2117-background-video