Welcome to WebmasterWorld Guest from 18.232.124.77

Forum Moderators: open

Message Too Old, No Replies

HTML5 and VIDEO as banner

     
3:56 pm on Sep 27, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1103
votes: 1


I have seen nice video and banner. How to do this in the correct way (responsive, lower resolution, code).
Sample is at URL: [url]infragistics.com[/url]
Need help.
1:27 am on Sept 28, 2015 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there toplisek,
here is an example for you to try...

<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://static.infragistics.com/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>video as responsive background</title>

<style media="screen">
html,body {
height:100%;
margin:0;
}
#video-bg {
position:relative;
overflow:hidden;
}
#video-bg video {
position:relative;
z-index:-1;
display:block;
width:100%;
margin:-7.9% 0;
}
#mask {
position:absolute;
display:flex;
width:100%;
top:0;
right:0;
bottom:0;
left:0;
z-index:0;
background-color:rgba(0,0,0,0.75);
}
#mask h1 {
display:flex;
align-items:center;
width:100%;
}
#mask h1 span {
display:block;
width:100%;
color:#fff;
text-transform:uppercase;
text-align:center;
}
#content {
padding:5%;
background-color:#fff;
box-shadow:inset 0 0 20px rgb(80,80,80);
}
</style>

</head>
<body>

<div id="video-bg">

<video preload="auto" autoplay="autoplay" loop="loop" muted="muted">
<source src="marketing/Website/VideoHeader/Home/home_page_2.mp4" type="video/mp4">
<source src="marketing/Website/VideoHeader/Home/home_page_2.ogv" type="video/ogg">
<source src="marketing/Website/VideoHeader/Home/home_page_2.WebM" type="video/webm">
</video>

<div id="mask">
<h1><span>Great apps happen by design</span></h1>
</div><!-- end #mask -->

</div><!-- end #video-bg -->

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p><p>
Phasellus porta, dui a elementum egestas, odio sapien rhoncus
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus
ac quam pellentesque lacinia quis sit amet augue. Fusce eu
euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu
et mauris scelerisque tristique. Donec fringilla mauris dolor,
sit amet vulputate lacus. Nulla feugiat mattis nulla non
tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis
nisi eget neque tempus facilisis eu quis sapien.
</p>
</div><!-- end #content -->

</body>
</html>


birdbrain
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members