3 Ответов

Рейтинг:
20

Gihan Liyanage

пожалуйста, проверьте эту тему

http://stackoverflow.com/questions/3800813/video-as-site-background-html-5[^]

http://stackoverflow.com/questions/3899865/can-you-display-html5-video-as-a-full-screen-background[^]

http://pupunzi.open-lab.com/2010/03/22/youtube-movie-as-background/[^]

Рейтинг:
20

Suraj Sahoo | Coding Passion

http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video[^]

https://www.youtube.com/watch?v=BoP2In1qJxc[^]

Проверьте здесь, Если вам помогут.
Спасибо
:)

Рейтинг:
1

santosh-k1

Нужно добавить ниже код для реализации :

CSS*****************

.video-block {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
}
.text-wrapper {
    position: relative;
    top: 30%;
    z-index: 2;
    margin: 0px auto;
    max-width: 720px;
    text-align: center;
}

HTML-код ************
<body>
<div class="text-wrapper">
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit qui voluptatum enim est deserunt assumenda, aspernatur quam aperiam!</p>
  <a href="#" class="content__cta">Link</a>
</div>
<video id="demo" class="video-block" autoplay="autoplay" loop="loop" muted="" width="300" height="150">
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
<source src="media/demo.ogv" type="video/ogg" />
</body>

Я надеюсь, что это поможет вам реализовать -:)