Разделы Responsive Video, имеющие 100vh и 100vw без использования положения: исправлено - PullRequest
Новая
       6

Разделы Responsive Video, имеющие 100vh и 100vw без использования положения: исправлено

0 голосов
/ 25 апреля 2020

Я хочу создать одностраничный сайт с несколькими разделами. В каждом разделе, содержащем видео, имеющее высоту и ширину, равные размеру окна просмотра (100vh и 100vw), эти видео накладываются друг на друга (каждый занимает полную ширину и полную высоту порта просмотра браузера).

Я видел несколько онлайн-уроков, в которых объясняется использование фиксированной позиции для адаптивных целей. Однако в других разделах я не хочу видео в качестве фона. Есть ли способ сделать это? (абсолютная позиция не подходит, так как при изменении размера она не занимает всю ширину и полную высоту страницы даже при игре с @media).

Я просто хочу, чтобы эти адаптивные видео-разделы не Перерыв или переполнение при изменении размера браузера.

Редактировать:

вот мой код html

<section class="section1">
	    <video id="videoBG" autoplay muted loop>
    		<source src="style/vid/1_first.mp4" type="video/mp4">
    	</video>
</section>


<section class="section2">
	<video id="videoBG2" autoplay muted loop>
    		<source src="style/vid/2_second.mp4" type="video/mp4">
    	</video>	
</section>

и css: 

section {
	height: 100vh;
}

.section1 #videoBG, .section2 #videoBG2 {
	position: fixed;
	z-index: -1;
}


/* Make video responsive for every size resizing*/

@media (min-aspect-ratio: 16/9) AND (min-aspect-ratio: 8/5) AND (min-aspect-ratio: 4/3) AND (min-aspect-ratio: 3/2){
	.section1 #videoBG, .section2 #videoBG2{
		width: 100%;
		height: auto;
	}
}
@media (max-aspect-ratio: 16/9) AND (max-aspect-ratio: 8/5) AND (max-aspect-ratio: 4/3) AND (max-aspect-ratio: 3/2) {
    .section1 #videoBG, .section2 #videoBG2 { 
        width:auto;
        height: 100%;
    }
}

1 Ответ

1 голос
/ 25 апреля 2020

Что касается вопроса. Вам нужно сложить видео друг на друга. И все видео секции должны иметь 100vh.

Идея состоит в том, чтобы окружить наши видео секции в контейнере-обертке (<main id="videosWrapper"><main>).

Если мы используем object-fit:cover, проблема решена. 

#videosWrapper{
 max-width:100vw;
 max-height:100vh;
}

А затем для отдельных видео используйте следующее CSS: 

.videoCSS{
 width: 100%;
 height:100%;
 object-fit: cover;
}

ПРОВЕРЬТЕ ПОЛНЫЙ КОД НИЖЕ: 

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

#videosWrapper{
  max-width:100vw;
  max-height:100vh;
}

.videoCSS{
  min-width: 100%;
  min-height:100%;
  width:100%;
}
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Stack of full screen videos</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <main id="videosWrapper">
    <section class="section1">
      <video class="videoCSS" autoplay muted loop>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
          type="video/mp4" />
      </video>
    </section>


    <section class="section2">
      <video class="videoCSS" autoplay muted loop>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4"
          type="video/mp4" />
      </video>
    </section>

    <section class="section2">
      <video class="videoCSS" autoplay muted loop>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
          type="video/mp4" />
      </video>
    </section>
  </main>

</body>

</html>

Примечание: object-fit:cover не работает в IE / Edge.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...