• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

HTML/CSS - responsive video background problem

Object Storage Arubacloud
+1 głos
339 wizyt
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

+1 głos
odpowiedź 22 maja 2021 przez VBService Ekspert (254,570 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 ]

 

komentarz 22 maja 2021 przez Piotrek G Nowicjusz (160 p.)
No dobrze to wyszło, wstawiłem swój filmik :), tylko nie widze dalszych napisów lorem ipsum i nie mogę scrollować
komentarz 22 maja 2021 przez VBService Ekspert (254,570 p.)

A możesz "wrzucić" kod na np.: codepen-a.

Sprawdzałem działa na operze, ff, chromie: https://codepen.io/vbservice/pen/KKWWzJM

 

0 głosów
odpowiedź 21 maja 2021 przez AgentTecza Obywatel (1,810 p.)
Witam, masz tutaj link do kanału z poradnikiem który może ci pomoże co do responsywności i tak jak zrobić to żeby tych scroll barów nie było
https://www.youtube.com/watch?v=rLr3jyHR4mA&list=PLTs20Q-BTEMNCMPOCFi4-aotruOZdZSdH&index=12&ab_channel=SamurajProgramowaniaSamurajProgramowania
komentarz 21 maja 2021 przez Piotrek G Nowicjusz (160 p.)
ok, zobaczę i moze sie uda, dzięki ;)

Podobne pytania

0 głosów
1 odpowiedź 209 wizyt
pytanie zadane 4 kwietnia 2018 w HTML i CSS przez Selfie Początkujący (440 p.)
0 głosów
2 odpowiedzi 327 wizyt
pytanie zadane 4 marca 2018 w HTML i CSS przez Waldemar Początkujący (410 p.)
0 głosów
0 odpowiedzi 182 wizyt
pytanie zadane 12 sierpnia 2020 w HTML i CSS przez kingkushlee Gaduła (3,960 p.)

92,690 zapytań

141,603 odpowiedzi

320,097 komentarzy

62,050 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...