2011-10-27 12 views
10

Próbuję utworzyć witrynę, w której mam film w tle odtwarzany przy użyciu HTML5. Wszystko działa idealnie, działa dokładnie tak, jak tego chcę. Ale chcę również, aby obraz był wycentrowany na ekranie, nawet gdy użytkownik zmienia rozmiar przeglądarki.Pełnoekranowe wideo w tle i utrzymywanie w środku

<video id="video" src="video/video.mov" type="video/mov" autoplay loop></video> 

Mam to do pracy z jQuery, ale zastanawiałem się, czy istnieje rozwiązanie CSS do tego.

function resizeHandler() { 
     // scale the video 
     var documentHeight = $(document).height(); 
     var documentWidth = $(document).width(); 
     var ratio = $('#video').width()/$('#video').height(); 

     if((documentWidth/documentHeight) < ratio) { 
      $('#video').css({ 
       'width': 'auto', 
       'height': '100%', 
       'left': '0px', 
       'right': '0px', 
       'top': '0px', 
       'bottom': '0px' 
      }) 

      var marginRight = $('#video').width() - $(document).width(); 
      $('#video').css('left', -marginRight); 
     } else { 
      $('#video').css({ 
       'width': '100%', 
       'height': 'auto', 
       'left': '0px', 
       'right': '0px', 
       'top': '0px', 
       'bottom': '0px' 
      }) 

      var marginTop = $('#video').height() - $(document).height(); 
      $('#video').css('top', -marginTop); 
     } 
    } 

To jest jQuery, którą napisałem, aby rozciągnąć obraz tak, aby pasował do ekranu i zachować obraz w środku. Nie jestem pewien, czy jest to możliwe w CSS, ale jeśli ktoś wie, może to być miłe.

+0

jest jakiś powód, dla którego funkcjonalny dbają o osiągnięcie tego w css? jeśli to działa, działa. – maxedison

+0

Niezupełnie, jestem po prostu ciekawy, czy to możliwe, czy nie w CSS, tylko ciekawość. –

+0

Czy to centrum wideo w dowolnym rozmiarze przeglądarki? – Jorre

Odpowiedz

1

Powoduje to, że będzie miał cały rozmiar ekranu i pozostanie tam, gdy użytkownik przewinie.

#video { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 
+2

Dzięki, ale w jaki sposób sprawi, że wideo będzie pasowało do okna przeglądarki i skaluje je proporcjonalnie? Użyłem już tego samego kodu css, ale nie udało mi się odtworzyć mojej jQuery za pomocą CSS –

5

To pytanie właśnie zostały odniesione do Place video with 100% height & 100% width using css or javascript

Chyba moja odpowiedź na to może być jeden szukałeś?

Oto kod:

header { 
 
    position: relative; 
 
    height: 100vh; 
 
    z-index: 0; 
 
} 
 
header h1 { 
 
    text-align: center; 
 
    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif; 
 
    color: #fff 
 
} 
 
header video { 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    -moz-transform: translateX(-50%) translateY(-50%); 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    -o-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
}
<header> 
 
    <h1>Sample Title</h1> 
 
\t <video autoplay loop class="bg-video"> 
 
\t \t <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4"> 
 
\t </video> 
 
</header>

A oto working fiddle example.

nadzieję, że to pomoże ktoś inny :)

3

chciałbym spróbować centrowania wideo z pozycji absolutnej wewnątrz stałej owijki. Tak więc na przykład:

Umieść film wewnątrz stałej owijkę ze 100% szerokości i wysokości:

#video-wrap { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 

Center wideo wewnątrz bardzo dużym obszarze margines auto:

#video { 
    position: absolute; 
    top: -9999px; 
    bottom: -9999px; 
    left: -9999px; 
    right: -9999px; 
    margin: auto; 
} 

I rozciągnij do pełnego rozmiaru z min-width i min-height:

#video { 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
} 

Oto ostateczny wynik:

#video-wrap { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#video { 
 
    position: absolute; 
 
    top: -9999px; 
 
    bottom: -9999px; 
 
    left: -9999px; 
 
    right: -9999px; 
 
    margin: auto; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
}
<div id="video-wrap"> 
 
    <video id="video" loop autoplay> 
 
     <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
 
     Your browser does not support HTML5 video. 
 
    </video> 
 
</div>

Tutaj również jsfiddle.

0

Użyj właściwości Css.dopasowanie do obiektu: przykrywka;

body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
video { 
 
    height: 100%; 
 
    width: 100%; 
 
}
<video controls> 
 
    <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
 
    <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
 
    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
    <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> 
 
</video>

Powiązane problemy