在對象頂部覆蓋文字

Question

我的網站上有一個YouTube視頻。我想知道是否有任何方法可以在視頻頂部放置文本，以便爲其指定特定的標題。

另外我怎樣才能做到這一點，但在視頻的左側？我也使用bootstrap。

Answer 1

您可以使用z-index或位置按順序執行此操作。

<div class="container"> 

<iframe width="560" height="315" src="//www.youtube.com/embed/YXVoqJEwqoQ" frameborder="0" allowfullscreen></iframe> 
    <div class="my-text"> This is my text</div> 
    </div> 

CSS

body { 
    background: #efefea 
} 

.container { 
    width: 600px; 
    margin: 0 auto; 
    padding: 10px; 
    position: relative; 
} 

iframe { 
    marign: 0 auto; 
} 

.my-text { 
    position: absolute; 
    color: #fff; 
    padding: 10px 0px; 
    text-align: center; 
    font-size: 50px; 
    background: rgba(0,0,0, 0.5); 
    top: 20px; 
    left: 0; 
    right: 0; 
} 

http://jsfiddle.net/websiddu/dy4exbcp/1/