Bootstrap 4 - 通過視頻添加文本和按鈕

Question

我想獲得像這樣的東西。但必須使用引導4.

我當前的代碼如下所示：

<section class="banner embed-responsive-item"> 
    <video class="hidden-sm-down" autoplay="" loop=""> 
     <source src="http://www.example/home.webm" type="video/webm"> 
     <source src="http://www.example/home.mp4" type="video/mp4"> 
    </video> 
    <div class="float-left">YOUR EXPERIENCE STARTS</div><br> 
    <a class="btn btn-primary btn-lg" href="#" role="button">Enquire Now</a> 
</section> 

可悲的是輸出只是把文字和按鈕圖像的結束，而不是在它的上面。

Answer 1

使您的視頻相對於位置和內容絕對相對，您可以實現您的圖像！

希望它有幫助！

HTML（由於在圖像的文本字體大小更高，我將它作爲H2，而不是格）：

<section class="banner embed-responsive-item"> 
    <video class="hidden-sm-down" autoplay="" loop=""> 
     <source src="http://www.example/home.webm" type="video/webm"> 
     <source src="http://www.example/home.mp4" type="video/mp4"> 
    </video> 
    <h2 class="float-right">YOUR EXPERIENCE STARTS</h2><br> 
    <a class="btn btn-primary btn-lg float-right" href="#" role="button">Enquire Now</a> 
</section> 

的CSS（你必須改變從頂部的位置爲您的文字和按鈕）

video{ 
    position:relative; 
    display:block; 
    width:100%; 
} 
.float-right{ 
    position:absolute; 
} 
h2{ 
    top:80px; 
    right:0; 
} 
a{ 
    top:150px; 
    right:50px; 
}