отзывчивый веб-дизайн - PullRequest
Новая
       10

отзывчивый веб-дизайн

2 голосов
/ 26 мая 2019

Я пытаюсь создать адаптивный веб-сайт, и проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что, когда я минимизирую размер браузера, мое фоновое видео оставляет кусок пустого пространства. Он не заполняет размер заголовка и следующий div после этого отображается после пробела.

Что касается избавления от видео-контейнера и использования 100vw и 100vh на video-bg, я пытался, и это не работает, потому что мое видео увеличено в этот момент и не отображает все видео.

https://www.videezy.com/urban/3951-top-to-bottom-panning-shot-of-downtown-los-angeles-4k

Ссылка выше для загрузки видео, которое я использую. 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
body {
    margin: 0;
    padding: 0;
}
#block {
    background-color: black;
    height: 500px;
}
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; overflow: 
    hidden; 
    max-width: 100%; 
} 
.embed-container video, /*.embed-container object, .embed-container embed*/ { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
</style>
<body>
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <div class='embed-container'>
            <video autoplay muted allowfullscreen>
                <source src="downtownla.mp4" type="video/mp4">
            </video>
        </div>
        <div id="block">
            1
        </div>
    </body>
</html>
</body>
</html>

Моя ожидаемая цель - иметь видео с адаптивным откликом, позволяющее сразу же показывать следующий div без пробелов.

Ответы [ 2 ]

2 голосов
/ 26 мая 2019

Не уверен, что именно вы ищете, так как вы не упомянули подробности о том, хотите ли вы дать ссылку на YouTube или тот, который указан в ссылке.

Сайт ниже поможет вам настроить адаптивное видео с разных платформ

https://embedresponsively.com/

Пример встроенного видео на YouTube 

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>

Также посмотрите на эту ссылку

1 голос
/ 27 мая 2019

Думаю, все будет хорошо. 

body {
  margin: 0;
}

.container-fluid .header {
  position: relative;
}

.video-container {
  z-index: -100;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
}

#video-bg {
  margin: 0 auto;
  width: 100%;
  min-width: 100vw;
  max-height: 100vh;
  height: 100%;
  display: block;
  object-fit: fill;
}

.block {
  width: 100%;
  height: 100vh;
}

#block1 {
  background: black;
}

#block2 {
  background: yellow;
}

#block3 {
  background: red;
}
<div class="container-fluid header"> 
  <div class="header">

    <div class="video-container">
      <video autoplay muted id="video-bg">

        <source src="https://static.videezy.com/system/resources/previews/000/003/951/original/downtownla.mp4" type="video/mp4"/>

      </video>
    </div> 
  </div>
</div>

<div id="block1" class="block">

</div>
<div id="block2" class="block">

</div>
<div id="block3" class="block">

</div>
...