Fullpage.js - видео + фон в том же разделе

Question

Я работаю с системой Fullpage.js для моего сайта. Следующая проблема состоит в том, что я не могу заставить мое фоновое изображение проходить через показ видео.

С классом.layer можно получить текст поверх видео. Но это не работает для фонового изображения. Или я не могу заставить его работать.

Я уже связался с GitHub fullpage.js, и они говорят, что это период, связанный с CSS.

код:

<script type="text/javascript">
  $(document).ready(function() {
   $('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage'],
    sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C', '#1BBC9B', '#C63D0F'  ],
    verticalCentered: true,
    css3: true,
    afterRender: function(){


     //playing the video
     $('video').get(0).play();
    }
    
   });
  });
 </script>

#myVideo{
  position: absolute;
  right: 0;
  bottom: 0;
  top:0;
  right:0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
   background-color: black; /* in case the video doesn't fit the whole page*/
    background-image: /* our video */;
    background-position: center center;
    background-size: contain;
     object-fit: cover; /*cover video background */
     z-index:1;
 }
  #layer2{
  background-image:url(imgs/TOHA.svg);
  background-repeat: no-repeat;
     background-attachment:fixed;
  background-size:cover;
     background-position:center;
  background-size:;
  z-index:9999;
 
 }

/* Layer with position absolute in order to have it over the video
 * --------------------------------------- */
 #section0 .layer{
  
  position: absolute;
  z-index: 4;
  width: 100%;
  left: 0;
  top: 43%;
  
 }

 /*solves problem with overflowing video in Mac with Chrome */
 #section0{
  overflow: hidden;
 }

<div class="section " id="section0">
    <div class="layer2"></div>
    <div class="layer">
   <h1>Fixed elements</h1>
   <p>Create your own headers and footers</p>
  </div>
    
     <video autoplay loop muted controls id="myVideo">
   <source src="imgs/flowers.mp4" type="video/mp4">
   <source src="imgs/flowers.webm" type="video/webm">
  </video>
  
 </div>

Answer 1

Вот как можно создать этот эффект.
Сначала создайте контейнер для вашего видео, если оно у вас уже есть, а затем используйте его:

<div class="videoContainer">... Content will go here ...</div>

Тогда стиль ваш .videoContainer вот так, например:

.videoContainer{
    width:80%; /* This will be the size of your background, let's say it's 80% */
    height:200px; /* This is size too */
    position: relative; /* This will be necessary to contain the image that will be created next to avoid it to go outside the .videoContainer because of its position:absolute; */
}

Затем создайте свое оверлейное изображение / фон следующим образом:

.bgOverlay{
    background:url('https://shechive.files.wordpress.com/2012/06/a-mc-random-12.jpg');
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    opacity: 0.5;
}

Все вместе должно выглядеть примерно так:

Пример онлайн здесь

<div class="videoContainer">
    <iframe width="100%" height="200" src="https://www.youtube.com/embed/0y-yhCav8Zw?autoplay=1" frameborder="0" allowfullscreen></iframe>
    <div class="bgOverlay"></div>
</div>

и CSS:

.videoContainer{
    width:80%;
    height:200px;
    position: relative;
}

.bgOverlay{
    background:url('https://shechive.files.wordpress.com/2012/06/a-mc-random-12.jpg');
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    opacity: 0.5;
}

Answer 2

Это помогло мне благодаря помощи Чуна.

<script type="text/javascript">
  $(document).ready(function() {
   $('#fullpage').fullpage({
    anchors: ['firstpage', 'secondPage', '3rdPage', '4thpage', '5thpage'],
    sectionsColor: [ '#1BBC9B', '#7E8F7C', '#1BBC9B', '#C63D0F'  ],
    verticalCentered: true,
    css3: true,
    afterRender: function(){


     //playing the video
     $('video').get(0).play();
    }
    
   });
  });
</script>

.videoContainer{
  position:absolute;
  right: 0;
  bottom: 0;
  top:0;
  right:0;
  width:100%;
  height:100%;
  background-size:100% 100%;
  background-size:contain;
  background-position:center center;
  object-fit:cover;
  z-index:50;

 
}
 .bgOverlay{
     background:url('https://shechive.files.wordpress.com/2012/06/a-mc-random-12.jpg');
     position:fixed;
  background-repeat:no-repeat;
  background-size:35% 35%;
  background-position:center bottom 90px;
     top: 0;
  left:0;
  right:0;
  bottom:0;
  z-index:100;
}
    #section0 .layer{
  
  position: absolute;
  z-index: 1000;
  width: 100%;
  left: 0;
  top: 43%;
  
 }

      <div class="section" id="section0">
   <div class="videoContainer">
         <video autoplay loop muted class="videoContainer">
          <source src="https://www.youtube.com/embed/0y-yhCav8Zw?autoplay=1" type="video/mp4">
    <source src="https://www.youtube.com/embed/0y-yhCav8Zw?autoplay=1" type="video/webm">
                
         </video>
         
     </div>
  <div class="layer">
   <h1>TOHA</h1>
   
  </div>
        <div class="bgOverlay"></div>
        </div>