0

I am following the advice at this answer to show a background movie in my jumbotron using bootstrap:
https://stackoverflow.com/a/34624728/9072894

The problem is the content of the web site shows up inside the jumbotron/movie. Here is a fiddle showing the problem:
https://jsfiddle.net/cortical_iv/kae4q601/228/

For instance, the content in <p> below appears inside the jumbotron:

<div class="jumbotron">
  <video id="video-background" preload muted autoplay loop>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="container">
    Hello World. I am in the jumbotron. As I should be.
  </div>
</div>

<p>
Here is my content. It inside the jumbotron. I want it to be outside the jumbotron.
</p>

How can I make the jumbotron/movie with clear boundaries? For instance, so the main content of my web site, like the stuff inside the <p> in this simple example, appears outside the jumbotron? The 'Hello World' is meant to be inside the jumbotron.

cort
  • 89
  • 1
  • 9
  • It's because the **video** has a `fixed position`. What is your requirement? – DragonBorn Jan 18 '18 at 16:55
  • you want the "Hello World" and

    tag to be out of the jumbotron?

     – Lakindu Gunasekara Jan 18 '18 at 16:56
  • I have clarified in the question what I am after: the 'hello world' should be in the jumbotron. The content starting with `

    ` is the main content of the site, and should be outside of the jumbotron. I also updated the fiddle to make this more clear.

     – cort Jan 18 '18 at 17:11
  • Check this fiddle? [Do you want something like this](https://jsfiddle.net/kae4q601/229/) – DragonBorn Jan 18 '18 at 17:26
  • 1
    Yes, @DragonBorn that's exactly what I'm after. While I don't have enough rep to upvote, it seems like something you should turn into an answer. – cort Jan 18 '18 at 17:47

1 Answers1

0

It wasn't working because it had a fixed position.

According to your requirement. You don't even need a bootstrap jumbotron and can achieve the same with plain css and can use absolute positioning to place your elements inside the video element. Check the snippet.

#video-background { 
  overflow: hidden;
  z-index: -100;
  width:100%;
  height: 100%;
}

.div--wrapper {
  position: absolute;
  top: 50px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <video id="video-background" preload muted autoplay loop>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="div--wrapper">
    Hello World. I am in the jumbotron. As I should be.
  </div>
</div>

<p>
Here is my content. It outside the jumbotron as it is intended to be.
</p>
DragonBorn
  • 1,809
  • 5
  • 20
  • 44
  • Might I suggest renaming that `container` class to something else, so it doesn't collide with the built-in bootstrap class that is very commonly used for delineating grid structures? I renamed it `container_vid`, probably not the best name. :) – cort Jan 22 '18 at 03:09
  • I have changed the _class_ `container` according to **BEM** naming conventions. For more info on how you should name your **HTML** and **CSS** _classes_ [Check This](https://css-tricks.com/bem-101/) – DragonBorn Jan 22 '18 at 05:13
  • Thanks. Still can't upvote. :( One thing I noticed: when you make the window narrow, the text in the movie doesn't actually stay separated from the text in the body of the content. E.g., the 'hello world' sentence, becomes all jumbled up with the 'Here is my content it is outside the jumbotron' sentence. So strict separation of content isn't really being maintained between the "jumbotron" and the body of the site. – cort Jan 22 '18 at 15:29
  • In response to my previous concern, I think the smart thing is just set the text to not wrap....Indeed, at this point I'm now just fixing the width/height at certain pixel values rather than letting it resize because letting it resize opens up all sorts of pains in the butt. So instead of 100% in your code I've changed it to X and Ypx. – cort Jan 22 '18 at 15:43
  • Maybe you should check out [positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position). Since `div--wrapper` has a position of absolute, it will ignore every other `position properties`. Read it and you will understand why it's happening. – DragonBorn Jan 22 '18 at 17:29