동영상 위에 좌우로 DIV가 있습니다.

Question

두 개의 DIV 사이에 비디오 요소를 넣으려고합니다. 동영상의 일부가 고객에게 보이지 않도록 DIV가 비디오를 오버레이해야합니다. 내 영어는 최고의 아니다, 그래서 나는 작은 이미지 : 그것은 다음과 같이해야했다 :

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

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

내 HTML과 CSS 코드는 다음과 같습니다

#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

을

당신이 할 수있는 가장 좋은 방법은 다음과 같습니다 :

부모 div 역할을하고 t 그는 너비 100 %로 비디오를 보냅니다.

div 컨테이너 (부모) 내부에는 원하는 너비로 왼쪽으로 1 플로트되고 오버레이 div 2는 원하는 너비로 오른쪽으로 플로팅됩니다.

필요한 경우 여기에 플로팅하여 읽으십시오. https://www.w3schools.com/css/css_float.asp