Twitter Bootstrap Question posted in

How to add text below video – Twitter bootstrap

I am creating a website and it has a fullscreen video background with a navigation bar and I want to scroll down from the video and see text below it. Whenever I add text, the text goes underneath the video and not after it. I want to continue the webpage after someone scrolls so there can be more content underneath (i.e. Paragraphs about the page)

I am also using Twitter Bootstrap 3 so I don’t know if that is changing anything.

The jsfiddle

HTML:

<section id="video">
  <div class="video-container">
  <!-- SAMPLE VIDEOS -->
    <video autoplay="true" loop="true" muted="true" class="main-video" poster="http://placehold.it/350x150">
      <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
      <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
      <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
      <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
    </video>
  </div>

Hello World!

I would really appreciate it if you could help me with this.
Thank you.

Tags:

3

Answers


  1. 0

    You can use a position:relative on the video container and set the video height to 100vh.

    .video-container{
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
    Login or Signup to reply.
  2. 0 
    .video-container{
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

    Please let me know if this is what you wanted.

    Login or Signup to reply.
  3. 0

    try this below code 

    <style type="text/css">
    .video-container{
    flot:left;
    width: 100%; 
    }
    .video-container video{width: 100%; height: 100vh;}
    .video-container p{width: 100%; line-height:26px; font-size:24px; text-align:center; padding-bottom:50px;}

    </style>
    <div class="video-container">
      <!-- SAMPLE VIDEOS -->
        <video autoplay loop muted="true" class="main-video" poster="http://placehold.it/350x150">
          <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
          <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
          <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
          <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
        </video>
        <p>this is testing</p>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search