부트 스트랩 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; 
}