CODEWITHSUNDEEP
csshtmlvideomaterialize
Paulo Roberto
Paulo Roberto

Reputation: 1548

materializecss - video in the background

I want the video to be played only in div "index -banner " , but it is being played in full page until you reach the footer . Already I tried everything without success.

Example: background

<!-- Video -->
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">

      <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
            <h5 class="center">User Experience Focused</h5>

            <p class="light">Text</p>
          </div>
        </div>

        <video autoplay loop id="bgvid">
            <source src="video/fundo.webm" type="video/webm">
            <source src="video/fundo.mp4" type="video/mp4">
        </video>

    </div>
  </div>

Code CSS:

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

Upvotes: 3

Views: 4146

Answers (2)

Rajendra
Rajendra

Reputation: 1434

just change the CSS attribute 

position: fixed;

to 

position: absolute;

Should work nice with Materilizecss framework

Upvotes: 0

Caroline Hermans
Caroline Hermans

Reputation: 391

You have 

min-width: 100%;
min-height: 100%;
width: auto;
height: auto;

Why not just set all of that to

width: 100%;
height: 100%;

?

Upvotes: 1

Related Questions