2016-11-10 64 views
1

我在視頻標籤定位時遇到了一些麻煩。我需要將視頻元素放入圖像中,如前景(附件中的圖片)。我使用了不同的css定位技巧,但在這種情況下沒有任何工作正常。如果我更改視頻標記的某些內容不同的div元素,則效果不錯。我開始懷疑標記視頻可能是問題。我沒有故意添加css,我要求你提供建議。由於絕對位置<video>標籤

example image

<div class="item active"> 
    <img src="../public/images/xxx.png"> 
    <div><video height=410px width:470px controls="controls"> 
      <source src="https:xxxxxx" type="video/mp4" /> 
     </video> 
    </div> 
</div> 
+1

這是你想要的東西做@Frezik https://jsfiddle.net/c7z6285f/ –

回答

0

我認爲這可以幫助你

\t   img{ 
 
     width: 100%; 
 
\t height: 500px; 
 
\t position: absolute; 
 
\t } 
 

 
\t \t video{ 
 
\t \t \t position: absolute; 
 
\t \t \t left: 50%; 
 
\t \t \t transform:translateX(-50%); 
 
\t \t }

0

嘗試浮動,這將解決您的問題的圖像。 圖像標籤添加style="width:100%; height:auto;float:left;"

<div class="item active"> 
    <img src="../public/images/xxx.png" style="width:100%; height:auto;float:left;"> 
    <div><video height=410px width:470px controls="controls"> 
      <source src="https:xxxxxx" type="video/mp4" /> 
     </video> 
    </div> 
</div>