DIVs links und rechts über VIDEO

Question

Ich versuche, ein Video-Element zwischen zwei Divs zu setzen. Die DIVs sollten das Video überlagern, so dass Teile des Videos für den Kunden nicht sichtbar sind. Mein Englisch ist nicht die beste, also machte ich ein kleines Bild :) Es sollte wie folgt aussehen:

+  full video width     + 
+------------------------------------------+ 

+------------+-----------------+-----------+ 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
| Overlay1 | Visible part | Overlay2 | 
|   | of video  |   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
+------------+-----------------+-----------+ 

Mein HTML und CSS-Code sieht wie folgt aus:

#videoElement { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
    width: 1280px; 
 
    height: 720px; 
 
} 
 

 
.video-overlay1 { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    margin: 0px; 
 
    width: 280px; 
 
    height: 720px; 
 
    background-color: blueviolet; 
 
} 
 

 
.video-overlay2 { 
 
    position: absolute; 
 
    left: 1000px; 
 
    top: 0px; 
 
    margin: 0px; 
 
    width: 280px; 
 
    height: 720px; 
 
    background-color: blueviolet; 
 
}

<div class="video-overlay1"> 
 
    <div class="video-overlay2"> 
 
    <video autoplay="true" id="videoElement"></video> 
 
    </div> 
 
</div>

Answer 1

Der beste Weg, dies zu tun, ist folgendes:

Haben Sie einen Container-DIV, der als Eltern-Div fungiert und t halten wird er Video in der Breite 100%.

Innerhalb der div-Container (Eltern) haben Overlay 1 div schwebte links in einer gewünschten Breite und Overlay div 2 schwebte rechts auf einer gewünschten Breite.

Bitte lesen Sie auf hier schwimmend wenn https://www.w3schools.com/css/css_float.asp