HTML/CSS - responsive video background problem

pytanie zadane 21 maja 2021 w HTML i CSS przez Piotrek G Nowicjusz (160 p.)

Witam.

Przychodzę z problemem, ponieważ chcę zrobić w tle responsywne video, które automatycznie będzie się otwierało. Problemy u mnie są takie, że wyskakują mi na raz 3 paski scrollowania oraz chciałbym odpowiednio dopasować video do ekranu oraz zmniejszało się tak jak jest u mnie, albo troche bardziej. Czy możecie mi podpowiedzieć jak budować responsywność video, co robie źle? jakie proponujecie wymiary video dla background na cały ekran, jaki format video, długość?

Filmik:

https://www.youtube.com/watch?v=KRR0QsxZQLw&ab_channel=PiotrekGurgul

wymiary video: 1920 x 768px MP4

Pozdrawiam ;)

HTML:

<div class="full-screen-video-container">
 <video src="images/caad.mp4" autoplay muted loop width="100%" height="100%"></video>
 </div>

CSS:

*{
    padding: 0;
    margin: 0;
}

.full-screen-video-container
{
    position: absolute;
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

.full-screen-video-container video
{
    position: absolute;
    width: auto;
    height: auto;
    min-width: 50%;
    min-height: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

2 odpowiedzi

odpowiedź 22 maja 2021 przez VBService Ekspert (253,340 p.)
edycja 22 maja 2021 przez VBService

Propozycja

<div class="full-screen-video-container">
  <video autoplay muted loop>
    <source src="https://www.youtubestock.com/static/preview/stock-video-no-copyright-video-copyright-free-4k-motion-graphics-green-screen-background-animation-download-151921.mp4" type="video/mp4">
    <source src="bg/bg1.webm" type="video/webm">
  </video>
</div>
<div class="page-container">
  <div class="page-content">
    <h2>Czym jest Lorem Ipsum?</h2>
    <p><b>Lorem Ipsum</b> jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</p>

    <h2>Do czego tego użyć?</h2>
    <p>Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że ma wiele różnych „kombinacji” zdań, słów i akapitów, w przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt czytelnie” po polsku. Wielu webmasterów i designerów używa Lorem Ipsum jako domyślnego modelu tekstu i wpisanie w internetowej wyszukiwarce ‘lorem ipsum’ spowoduje znalezienie bardzo wielu stron, które wciąż są w budowie. Wiele wersji tekstu ewoluowało i zmieniało się przez lata, czasem przez przypadek, czasem specjalnie (humorystyczne wstawki itd).</p>

    <h2>Skąd się to wzięło?</h2>
    <p>W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. Ma ono korzenie w klasycznej łacińskiej literaturze z 45 roku przed Chrystusem, czyli ponad 2000 lat temu! Richard McClintock, wykładowca łaciny na uniwersytecie Hampden-Sydney w Virginii, przyjrzał się uważniej jednemu z najbardziej niejasnych słów w Lorem Ipsum – consectetur – i po wielu poszukiwaniach odnalazł niezaprzeczalne źródło: Lorem Ipsum pochodzi z fragmentów (1.10.32 i 1.10.33) „de Finibus Bonorum et Malorum”, czyli „O granicy dobra i zła”, napisanej właśnie w 45 p.n.e. przez Cycerona. Jest to bardzo popularna w czasach renesansu rozprawa na temat etyki. Pierwszy wiersz Lorem Ipsum, „Lorem ipsum dolor sit amet...” pochodzi właśnie z sekcji 1.10.32.</p><p>Standardowy blok Lorem Ipsum, używany od XV wieku, jest odtworzony niżej dla zainteresowanych. Fragmenty 1.10.32 i 1.10.33 z „de Finibus Bonorum et Malorum” Cycerona, są odtworzone w dokładnej, oryginalnej formie, wraz z angielskimi tłumaczeniami H. Rackhama z 1914 roku.</p>

    <h2>Skąd to wziąć?</h2>
    <p>Jest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanego humoru czy przypadkowych słów, które nawet w najmniejszym stopniu nie przypominają istniejących. Jeśli masz zamiar użyć fragmentu Lorem Ipsum, lepiej mieć pewność, że nie ma niczego „dziwnego” w środku tekstu. Wszystkie Internetowe generatory Lorem Ipsum mają tendencje do kopiowania już istniejących bloków, co czyni nasz pierwszym prawdziwym generatorem w Internecie. Używamy zawierającego ponad 200 łacińskich słów słownika, w kontekście wielu znanych sentencji, by wygenerować tekst wyglądający odpowiednio. To wszystko czyni „nasz” Lorem Ipsum wolnym od powtórzeń, humorystycznych wstawek czy niecharakterystycznych słów.</p>
  </div>
</div>

<style>
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  border: 0;
}
.full-screen-video-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background-color: dimgrey;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.full-screen-video-container video {
  width: 100vw; 
  height: 100vh;
  object-fit: cover;
}
.page-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: rgba(105, 105, 105, 0.8); /* dimgrey */  
  overflow-y: auto;
}
.page-content {
  width: 96vw;
  margin: 0 auto;
}
p {
  font: 1em/1.6em arial;
}

użyte video: NO COPYRIGHT MOTION GRAPHICS [ 1 ] [ 2 ]

[ object-fit css ]