CODEWITHSUNDEEP
htmlcssvideobackground
Kira
Kira

Reputation: 61

Putting a .MP4 Video as a background using HTML and CSS

I'd really like to figure out how to do this. My site was made with Ruby on Rails, but I'm assuming to do this you only need to use HTML and CSS.

Here is what I've tried so far:

BODY OF views/layouts/home_layout.html.erb :

`

<body>

    <div class="navbar navbar-inverse navbar-fixed-top" id="navbar">
      <div class="container" id="body">
        <a id="nav" class="navbar-brand" href="/projects">
            <img src="http://i1051.photobucket.com/albums/s423/Kira-Banks/check-2.png" id="logo">
            Checklance
        </a>
      </div>
    </div>

    <div  id="homeContainer">

        <div id="homeVideo">
            <video>
                <source src="trafficLoop.mp4" type="video/mp4">
            </video>
            <div>
            </div>
        </div>

        <%= yield %>
    </div>

    <footer id="footer">Copyright 2014 Kira Banks</footer>

</body>

`

assets/stylesheets/pages.css.scss:

`

#homeVideo {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#homeVideo video {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
}

#homeVideo div {
    position: relative;
    z-index: 1;
}

`

My video file is located in assets/images/trafficLoop.mp4

Upvotes: 1

Views: 5740

Answers (1)

Miomir Dancevic
Miomir Dancevic

Reputation: 6852

Best to use is YTPlayer

Upload your video to Youtube, and use player, it most common and best solution in the web for full screen background player. It also compatibile with all version of browsers

https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

Use it like this

$(function(){
      $(".player").YTPlayer();
    });

Upvotes: 1

Related Questions