full background video html5 - błąd

pytanie zadane 4 marca 2018 w HTML i CSS przez Waldemar Początkujący (410 p.)

Witam, mam problem z zainkludowaniem video (Chcę mieć taki efekt: https://www.airforce.com/ ), szerokość wychodzi mi dobrze ale wysokość za bardzo się rozciąga. wstawiam kod:

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>przyklad1</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:200,500&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>
    <nav>
        <div class="menu_wrapper">
            <div class="logowrapper"><img src="img/wpawelczyk-newsite_02.png" alt="logo"></div>
            <div class="navigation">
                <ul>
                    <li><a href="#">Strona główna</a></li>
                    <li><a href="#">O mnie</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div id="bg">
        <video autoplay muted loop id="myVideo">
  <source src="video/mountain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
    </div>
</body>

</html>

no i css:

body {
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
    display: inline;
    font-size: 12px;
}

li {
    display: inline;
    font-weight: 300;
    text-transform: uppercase;
    margin: 25px;
    text-align: center;
}

li:hover {}

li a {
    text-decoration: none;
    color: white;
    padding: 1px;
    text-align: center;

}

li a:hover {
    color: black;
    font-weight: 500;
    background-color: white;
}

nav {
    background-color: black;
    color: white;
    text-align: center;
    letter-spacing: 3px;
    padding-bottom: 23px;

}

nav img {
    width: 15%;

}

.logowrapper {
    margin-bottom: 20px;
}

#bg {
    min-height: 100vw;
    min-width: 100vh;
    position: relative;
    top: 0;
    left: 0;
}

#myVideo {
    width: 100%;

}

Pozdrawiam i proszę o pomoc :)

2 odpowiedzi

odpowiedź 4 marca 2018 przez Kamil M Bywalec (2,340 p.)
wybrane 4 marca 2018 przez Waldemar

Najlepsza

Spróbuj tego:

#bg {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

#myVideo {
    width: 100%;
    height: 100%;
}

komentarz 4 marca 2018 przez Waldemar Początkujący (410 p.)

to samo : / dodał się jeszcze odstęp nie wiem skąd, między menu, a video. W sumie dobrze by było gdyby video chowało się pod te menu, bo to może pomóc, tak mi się wydaję.

komentarz 4 marca 2018 przez Kamil M Bywalec (2,340 p.)

W takim razie nie wiem do końca jakiego efektu oczekujesz. Pobawiłem się tym trochę i zrobiłem kilka zmian. Przeanalizuj i porównaj:

        body{
            margin: 0;
        }
        
        .page-header{
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
        
        .my-video{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .page-nav{
            position: absolute;
        }
        
        ul {
            list-style-type: none;
            display: inline;
            font-size: 12px;
        }

        li {
            display: inline;
            font-weight: 300;
            text-transform: uppercase;
            margin: 25px;
            text-align: center;
        }

        li:hover {}

        li a {
            text-decoration: none;
            color: white;
            padding: 1px;
            text-align: center;
        }

        li a:hover {
            color: black;
            font-weight: 500;
            background-color: white;
        }

        nav {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            text-align: center;
            letter-spacing: 3px;
            padding-bottom: 23px;
            width: 100%;
        }

        nav img {
            width: 15%;

        }

        .logowrapper {
            margin-bottom: 20px;
        }

<body>
    <header class="page-header">
        <nav class="page-nav">
            <div class="menu_wrapper">
                <div class="logowrapper"><img src="logo.svg" alt="logo"></div>
                <div class="navigation">
                    <ul>
                        <li><a href="#">Strona główna</a></li>
                        <li><a href="#">O mnie</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Kontakt</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <video autoplay muted loop class="my-video">
            <source src="work.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>
    </header>
</body>

Efekt u mnie (bez scrollbara):

odpowiedź 4 marca 2018 przez votedvenus Nowicjusz (160 p.)

"wysokość za bardzo się rozciąga"

chodzi ci o to że musisz scrolować stronę aby widzieć cały film?

dla elementu bg ustawiłeś wysokość 100vh co oznacza że jego wysokość jest równa 100% wyświetlanego przez przeglądarkę ekranu niezależnie od tego gdzie się element znajduje

ponieważ nad video znajduje się nav który już zajmuje pewną wysokość to video schodzi poniżej ekranu.

w linku przez ciebie podanym zwróć uwagę że ich panel nawigacyjny jest na pozycji absolutnej czyli jego ustawienie nie wpływa na inne elementy( można tak nakładać na siebie boxy )

Spróbuj działać na pozycjach ewentualnie zmniejsz wysokość video tylko przy zmienianiu wysokości nie ustawisz jej dla wszystkich rozdzielczości więc polecam pierwszy sposób