Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Dorina Ramona Mihai Costan
Dorina Ramona Mihai Costan
17,168 Points
Posted by Dorina Ramona Mihai Costan
Dorina Ramona Mihai Costan
17,168 Points

Video Background inside div instead of image

Hi,

I'm want to put a video background instead of the background-image that I currently have and overlay the text and the button in the same way as I do now (is for the little game we made in javascript). I'm using Bootstrap 4. How can I do that? Thank you.

I want to change this for a video-background: 

style="background-image: url(img/bitcoin.png); background-repeat:no-repeat; background-size: cover;"

This is the structure:

<section id="bitcoin" class="text-center my-5">

 <div class="container">
  <h2 class="h1-responsive font-weight-bold text-center mt-5">xxx</h2>      
  <p class="px-5 mb-5 pb-1 lead dark-grey-text text-center">xxx</p>

  <div class="row">
   <div class="col-md-12 mb-4">
    <div class="card card-image" style="background-image: url(img/bitcoin.png); background-repeat:no-repeat; background-size: cover;">
     <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4 rounded">
      <div class="col-md-12">
       <h6 class="text-primary"><i class="fa fa-bitcoin"></i><strong> xxx</strong></h6>
       <h3 class="py-3 font-weight-bold"><strong>xxx</strong></h3>
       <p class="pb-3">xxx</p>

 <!-- Button -->
 <div class="text-center mt-3">
  <a href="http://..." class="btn btn-primary btn-rounded waves-light" mdbWavesEffect><i class="fa fa-bitcoin left"></i> xxx</a>
 </div>
 <!-- Button -->  

     </div>
    </div>
   </div>
  </div>
 </div>      
</div>

</section>

1 Answer

Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 Points

Hi , here's an Article i found for you

https://www.w3schools.com/howto/howto_css_fullscreen_video.asp

and here's a plugin i personally used for that matter

http://vodkabears.github.io/vide/

check em out, hope it helps and u learn new cool things on the way ;)

Dorina Ramona Mihai Costan
Dorina Ramona Mihai Costan
17,168 Points
Dorina Ramona Mihai Costan
Dorina Ramona Mihai Costan
17,168 Points

Hi Sam,

Thank you for your help but the w3schools solution doesn't work for my code. Same as before. It must be some conflict around in the code. I'll take a look at the plugin.

Anyway, while I try to figure out the problem and fix it, it occured to me to turn the video into a pretty nice gif and looks great. Maybe, I'll leave it like that.

Thanks. Dorina