Full screen video as background for any resolution

Asked

Viewed 1,094 times

0

I need to put a full screen video as the background of a web page, someone knows how I can do this?

Thank you.

css css3

1 answer

2


Accepts tb video.ogg and video.webm

Webm has been used to play video files on HTML5 pages without requiring users to install additional plugins in the browser. It is a format that should increasingly be used by websites.

CSS

.fullscreen-bg__video {
    position: fixed; 
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    z-index: -1;

HTML

<div>
  <video loop muted autoplay poster="" class="fullscreen-bg__video">
    <source src="video.webm" type="video/webm" type="video/webm">
    <source src="vide.mp4" type="video/mp4">
    <source src="" type="video/ogg">
  </video>
</div>

 <p><font size="7" color="#FF0000">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing."</font></p>

Loop muted autoplay attributes compatible browsers

Media formats supported by audio and video HTML elements and browser compatibility Compatibility of browsers

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.