根據父div在純javascript中調整子視頻元素的大小

Question

我可以成功拖放div及其包含的視頻元素。但是在調整div的大小時，視頻元素沒有被調整大小。

CSS：

.drsElement { 
position: absolute; 
border:8px solid #a00000; 
} 

.drsMoveHandle { 
height: 20px; 
background-color: #CCC; 
border-bottom: 1px solid #666; 
cursor: move; 
} 

標記：

<div id="myDiv" class="drsElement drsMoveHandle" 
    style="left: 400px; top: 280px; width: 50px; height: 100px; 
    background: #348534; text-align: center"> 
    <video id="localVideoPlayer" autoplay muted ></video> 
</div> 

如何解決這個問題？我正在使用this示例。

Answer 1

視頻那麼，在嘗試了很多方法之後，我發現如果視頻元素已經開始播放媒體，則無法調整視頻元素的大小。它會在嘗試設置寬度或高度時拋出「Uncaught SyntaxError：意外的標記ILLEGAL」錯誤。因此，我決定使用畫布並將視頻元素設置爲畫布上下文的方法的源，以達到我的目的。現在，我的標記如下：

<div id="myDiv" class="drsElement drsMoveHandle" 
    style="left: 20px; top: 20px; 
    background: #348534; text-align: center"> 
    <canvas id="localVideoCanvas" ></canvas> 
</div> 

和CSS：

.drsElement { 
position: absolute; 
border:8px solid #a00000; 
} 

.drsMoveHandle { 
height: 20px; 
background-color: #CCC; 
border-bottom: 1px solid #666; 
cursor: move; 
} 

#localVideoCanvas { 
    width: 100%; 
    height: 100%; 
} 

Answer 2

如果找你想重新大小的DIV使用

width: auto; 
height: auto; 

OR

如果找你想重新大小根據DIV使用

video{ 
    width: 100%; 
    height: 100%; 
}