CODEWITHSUNDEEP
jqueryhtmlcssvideobackground
akoito
akoito

Reputation: 513

How to make the video display inside specific div?

Im trying to make specific div to have a video background but its not doing it right. Here is the page im working on: http://videotest-2.businesscatalyst.com/sample.html

The video shows up inside #container and i wanted it to be inside #wrapper

Here is my code: Using Tubular Plugin

<style type="text/css">
body,html { margin:0; padding::0;}
#container {
background-color: #000;
height:100%;
min-height:50% !important;
width:100&;
position:relative;  
}
#wrapper {
opacity:75%;
height:500px;   
background-color:#FF5A5D;
}
</style>
</head>
<body>
<section id="container">
<div id="wrapper">Top section- I need a youtube video background here</div>
</section>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/jquery.tubular.1.0.js"></script>
<script src="js/custom.js"></script>

</body>
</html>

Do you guys know what seems to be the issue?

thanks in advance!

Upvotes: 1

Views: 2099

Answers (2)

Didier
Didier

Reputation: 11

CSS:

 .body {
}
.videobackground {
 margin: auto;
 background-color: black;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 margin: 0px;
}

HTML:

<head>
    <link rel="stylesheet" href="css/css.css">
</head>
<body class="videobackground">
  <video class="videobackground" id="videobackground" preload="" muted=""controls="" poster="" >
   <source src="videos/film2.mp4" type="video/mp4" />
   <source src="videos/film2.3gpp" type="video/3gpp" />
  </video>
  </body>

Upvotes: 1

Gratus D.
Gratus D.

Reputation: 877

Look at line 45 in js/jquery.tubular.1.0.js:

$body.prepend(tubularContainer);

Essentially, this piece of code says that the video will simply be added to the top of your body. If you want it inside the #wrapper try editing this line to.

$("#wrapper").append(tubularContainer);

Upvotes: 2

Related Questions