CODEWITHSUNDEEP
htmltwitter-bootstraphtml5-videobootstrap-4
John Crawford
John Crawford

Reputation: 10041

Bootstrap 4 - Add text and button over video

I am trying to get something like this. But it must use Bootstrap 4.

My current code looks like this:

<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>

Sadly the output just puts the text and button at the end of the image instead of on top of it.

Upvotes: 2

Views: 7712

Answers (4)

Oneprime
Oneprime

Reputation: 11

For me the only way I got it to work, for now, was to place inline CSS. I placed my header outside of the section.

   <h3 style="font-size: 75px;
       font-family: 'Poppins', sans-serif;
       color: #e8d5a0;
       position: absolute;
       top: 400px;
       left: 650px;
       display: inline-block;">Home</h3>

   <a class="btn-primary btn-lg" href="#" style="font-size:20px;
       font-family: 'Poppins', sans-serif;
       color: #e8d5a0;
       position: absolute;
       top: 600px;
       left: 820px;
       display: inline-block;">Hello</a>
    <section>
       <video class="embed-responsive" height="auto" width="100%" 
            poster="/static/1stframe.jpg" autoplay muted logo loop style="  
            position:fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            z-index:-1;">
            <source src="/static/4k.webm" type="video/webm">
       </video>
    </section>

Upvotes: 1

Keerthana Prabhakaran
Keerthana Prabhakaran

Reputation: 3787

https://jsfiddle.net/exghLtcy/ 

video{
  position:relative;
  display:block;
  width:100%; 
}
.float-right{
  position:absolute;
}
h2{
  top:80px;
  right:0;
}
a{
  top:150px;
  right:50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="banner embed-responsive-item">
    <video class="hidden-sm-down" autoplay="" loop="">
        <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
        <source src="http://techslides.com/demos/sample-videos/small.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>

making your video relative in position and your content absolute, you can achieve what you have in image!

Hope it helps!

Html(Since the text in image is higher in font size, I've made it as h2 instead of div):

<section class="banner embed-responsive-item">
    <video class="hidden-sm-down" autoplay="" loop="">
        <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
        <source src="http://techslides.com/demos/sample-videos/small.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:(You got to change the position from top for your text and button)

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

Upvotes: 1

Ashok Kumar
Ashok Kumar

Reputation: 1

<div class="container">
    <img src="img_snow.jpg" alt="Snow">
    <button class="btn">Button</button>
</div>

Upvotes: -1

maya
maya

Reputation: 11

video {
  position: relative;
  height: auto;
  width: 100%;
}

h2 {
  position: absolute;
  top: 50%;
  right: 0;
}

a {
  position: absolute;
  top: 50%;
  right: 5%;
}

Upvotes: 1

Related Questions