HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="test.css" >
</head>
<body>
  <div class="div div__site">
  <div class="div div__videoWrap">
    <video id="bgVideo" autoplay muted loop  controls class="video-block__video">
      <source type='video/mp4'  src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
    </video>
  </div>

    <section style="background-color: aqua;"  class="sec sec__two"><p>Sec2</p></section>

  </div>
</body>
</html>

мой css

.div.div__videoWrap{
  width:100%;
  height:100%;
}
.div.div__videoWrap #bgVideo{
 object-fit: cover;
  width:100%;
  height:100%;
}
.sec.sec__two{
  height:1000px;
}

Без тега видео все работает нормально. Но с тегом видео, если я обновляю страницу (в пределах 2-3 кликов обновления), страница прокручивается сама вниз, а я не писал JavaScript. Я искал в Google, но не нашел полезного кода. Я также не хочу использовать window.scrollTo(0, 0); для прокрутки вверх после обновления страницы. Пожалуйста, помогите ... Заранее спасибо

0
Pranav Pranav 3 Ноя 2020 в 08:51

2 ответа

Лучший ответ

Что ж, ваш вопрос немного неверен. При проверке кода кажется, что вы хотите, чтобы ваша страница оставалась наверху, где вы встроили свое видео.

Вы можете добиться этого, добавив свойство переполнения. В свой CSS просто добавьте этот overflow-anchor: none;

Вот ваши изменения:

.div.div__videoWrap{
width:100%;
height:100%;
}
.div.div__videoWrap #bgVideo{
overflow-anchor: none;
object-fit: cover;
width:100%;
height:100%;
}
.sec.sec__two{
height:1000px;
}

Если вы хотите узнать больше об этом свойстве переполнения, вы можете прочитать его здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor

0
Tushar Rana 3 Ноя 2020 в 06:17
.div.div__videoWrap{
      width:100%;
      height:100%;
    }
    .div.div__videoWrap #bgVideo{
     object-fit: cover;
      width:100%;
      height:100%;
    }
    .sec.sec__two{
      height:1000px;
    }
    .div__site{
      overflow-anchor: none;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 
</head>
<body>
  <div class="div div__site">
  <div class="div div__videoWrap">
    <video id="bgVideo" autoplay muted loop  controls class="video-block__video">
      <source type='video/mp4'  src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
    </video>
  </div>

    <section style="background-color: aqua;"  class="sec sec__two"><p>Sec2</p></section>

  </div>
</body>
</html>

Я добавил в ваши коды один эффект CSS, попробуйте это

0
Mijanur Rahaman 3 Ноя 2020 в 06:14