How can we keep contained bucket-list.mp4 in video-jumbotron. The video is full-width, but depending on the screen size, the video's height runs off the bottom of the page instead of being cut off and contained in <div class="video-jumbotron">, which is the goal of this question.
view
<div class="video-jumbotron">
<video id="bg-video" autoplay="true" loop='true'>
<source src="/assets/bucket-list.mp4" type="video/mp4" />
</video>
<%= image_tag 'goal-setting-bucket-list-website.png' %>
CHALLENGE WHAT YOU DO
TO CREATE THE LIFE YOU WANT
</div>
# Bottom of video appears underneath this <div>
<div style="background-color: white;">
Testing
</div>
css
.video-jumbotron {
padding-top: 25px;
padding-bottom: 40px;
margin-bottom: 20px;
}
#bg-video {
top: 0px;
left: 0px;
right: 0px;
position: fixed;
z-index: -1;
width: 100%;
}
If the #bg-video (video block) is fixed it will have no relation to your parent div .video-jumbotron and it will be relative (fixed) to the body.
We want to relate the video tag -> #bg-video to it's parent -> .video-jumbotron, so we can contain it.
Add these styles in addition to yours (change #bg-video position from fixed to absolute):
.video-jumbotron {
position: relative;
overflow: hidden;
}
#bg-video {
position: absolute;
}
Now the parent div .video-jumbotron has control and can teach the child what not to do :)
Related
Hello I have been trying to overlay an image on top of a video in a resizable container. I have tried many examples but each seems specific to the implementation.. My latest test is here https://jsfiddle.net/1Lfsy95w/ I can't get the video size to be correct and the image is out of the bounds.. Both should remain 16:9 aspect ratio, and be be resized of parent
#player-overlay {
display:block;
position: absolute;
width: 100%;
height: auto;
z-index: 4;
opacity: .5;
}
#OutputVideo {
display: block;
z-index: 1;
background-color:red;
width: 100%;
max-height:100%;
height:auto;
}
And the html
<div id="wrapper">
<img id="player-overlay" src="https://images.unsplash.com/photo-1580757468214-c73f7062a5cb"/>
<video id="OutputVideo">
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
</video>
</div>
Absolutely-positioned elements are set with with respect to the nearest non-static ancestor. You need to set position on your wrapper:
#wrapper {
position: relative;
}
To keep the image from pushing the wrapper below the video, hide overflow:
#wrapper {
position: relative;
overflow: hidden;
}
Fiddle demo
You can simplify things a bit by 1) putting the image as a background, and 2) moving the overlay after the video. This gives you more sizing flexibility and eliminates the need to fiddle with z-index.
#wrapper {
position: relative;
}
#player-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .5;
background-image: url(https://...);
background-position: center;
background-size: cover;
}
<div id="wrapper">
<video controls id="OutputVideo">
<source src="http://....webm" type="video/webm">
</video>
<div id="player-overlay"></div>
</div>
Fiddle demo 2
I'm trying to place a small video behind a banner-like div element. After some time researching I managed to at least show the contents of the div, but the video is nowhere to be seen. If I place them separately both show up, but if I try to stack them on top of each other it disappears.
HTML:
<div id="castle-siege">
<div id="cs-video">
<video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src=/assets/img/cs.mp4" type="video/mp4">
</video>
</div>
<div id="cs-table">
//content
</div>
</div>
CSS:
#castle-siege {
width: 1000px;
height: 150px;
text-align: center;
position: relative;
overflow: hidden;
}
#cs-video {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 5;
}
#cs-table {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 10;
}
I think in this instance, that you need to set position attribute as well as z index in order to display the video properly. Also ensure your video is present and correct at the set url of course! Set the position of the video to absolute and set the table relative to it, either with a higher or lower z-index, as necessary (higher if you want it to be seen on top of the video)
For purposes of demo, I set the width to 80%, it's prob better to use percentages/ an adjustable unit, rather than setting the width in px.
Hope this helps
#castle-siege {
width: 80%;
height: 150px;
text-align: center;
position: relative;
overflow: hidden;
}
#cs-video {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index:0;
}
#cs-table {
width: 100%;
height: 100%;
margin-top: 30px;
margin-left: 50px;
color:red;
text-align:left;
position: relative;
z-index:1;
}
<div id="castle-siege">
<div id="cs-video">
<video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4">
</video>
</div>
<div id="cs-table">
Hi there, how's it going? There's supposed to be a table here.
</div>
</div>
I have a video playing in the background of my top div. It looks fine when the screen is full size, but when I resize the browser window to see how it will look on smaller screens, the height of the div remains the same, leaving a big empty space between the background video and the next div.
Here is a preview of the site if you'd like to see for yourself, along with the specific code. https://codepen.io/CarlyWysocki/pen/YYaBOd
HTML:
<div class="jumbotron" id="top">
<video autoplay loop>
<source src="https://videos2.sendvid.com/03/25/up5p1yhu.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="container text-center">
<h1>Mac Demarco</h1>
<h4>Canadian singer-songwriter, multi-instrumentalist and producer.</h4>
<i class="fa fa-chevron-circle-down"></i>
</div>
</div>
CSS:
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee;
height: 100%;
overflow: hidden;
position: relative;
}
.container {
position: relative;
}
If it just stays in the center, you can add css media queries resizing appropriately. One could also just use a picture for small screens via media queries.
Using the referenced stack overflow answer:
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
I'm currently working on website for a video producer. He would like to have his demo reel running in the background when you go to his webpage. I'm trying to create a few div elements that will that will be over the video. They will actually right at the top of the webpage, acting sort of like a navbar, but not really.
Here is the code I'm working with. Of course, you won't be able to see the content when it is run, but maybe I have a mistake some where.
.background-wrap {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
background: #353030;
}
#video-background {
position: relative;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: 500;
height: 500;
z-index: 100;
}
#header-container {
position: relative;
display: inline;
z-index: 200;
}
.header-item {
color: white;
letter-spacing: 3px;
text-align: center;
position: absolute;
<div class="background-wrap">
<video width="1700" height="956" autoplay muted loop id="video-background">
<source src="img/reel.mp4" type="video/mp4">
<source src="img/reel.webm" type="video/webm">
<source src="img/reel.ogv" type="video/ogg">
Sorry, your browser doesn't support HTML5 video.
</video>
<div class="row" id="header-container">
<div class="col-md-4">
<div class="header-item">
<h1 id="title">Josh Kelley</h1>
</div>
</div>
<div class="col-md-4">
<div class="header-item">
<h3 id="subtitle" href="https://vimeo.com/204080098" target="_blank">Video Production & Photography</h3>
</div>
</div>
<div class="col-md-4">
<div class="header-item">
<a id="subtitlebutton1" href="#about" class="btn btn-dark btn-lg">About Me</a>
</div>
</div>
</div>
</div>
My biggest problem is when I change my .header-item to position:absolute.
When I inspect the element with developer tools the content is smashed below the video above. You can even see the About Me button is halfway showing.
Here is what it looks like when #header-container changed to position:relative and delete the position css property off .header-item.
I've marked in RED where I want the elements to go. Any help would be amazing.
Sorry I haven't enough time to provide you with complete solution, but:
.background-wrap {
position: relative;
width: 100%;
height: 100%; /*this has effect of 0px in your case*/
overflow: hidden; /*this hides everything that doesn't fit to the container size*/
top: 0;
left: 0;
background: #353030;
}
Here you specified height: 100% but 100% of what? Its a top level element and you set it's child's position to absolute. So the computed height is 0. It would be ok in other cases, but you've set the overflow to hidden...
As I understand, this is why you see nothing when you set the position to absolute.
You should fix all of your sizes keeping in mind that they don't grow to their children's sizes if those children are absolute positioned. After that check your bootstrap's default configurations (is it static by default, is it inline or block and so on).
I am tying to have a video tag to fill 100% of a div:
a) it doesn't need to keep the ratios(otherwise we need to use the overflow:none);
b) fill a div, not the whole background;
c) it would be a plus to be responsible. Now it is as long as you re-size window diagonally. Keeping height and re-sizing horizontally cuts the video.
I have tried dozens if not hundreds of alternative, and all of them keep the initial video ratio.
it works in the fidlle .... maybe because the screen is small, maybe because fiddle is a better browser...
<body>
<div class="wrapper">
<div class="header">
.....
</div>
<div class="out-video">
<video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%">
<source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm">
<source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4">
</video>
</div>
</div>
The site is here but as I try the solutions, it will change... There is a right and left sidebar empty. I would like the video to fill the whole width. When it covers the div, the height change and the video does not show in full. I would like something like the background-size 100% 100% that stretches the images to the end of the div, but it does not work for video.
Thank you for any suggestion in advance.
PS. It seems that android family does not play the video!
l
Use object-fit css property, though there is no support for IE, but it's still quite reasonable to be used for <video>, <img> tags.
Check CanIUse for Browser Support, and CSS-Tricks for usage.
Example:
/** If parent has some defined width/height */
.video-element {
width: 100%;
height: 100%;
object-fit: cover;
}
You can use a solution like this one. Ratio dont change, but you may lose the right part of the video.
video#bgvid {
position: absolute;
z-index: 0;
background: url(mel.jpg) no-repeat;
background-size: 100% 100%;
top: 0px;
left: 0px; /* fixed to left. Replace it by right if you want.*/
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
The video will be fix to top left corner. If you want to improve it, I think you will need some JavaScript.
Edit :
Just a find a solution with JQuery who can fit your need : simulate background-size:cover on <video> or <img>
Demo
Simple CSS inheit
video {
width: inherit;
height: inherit;
}
div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
}
Try this
HTML:
<div id="MainBanner">
<video autoplay muted loop>
<source src="something-nice.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Heading</h1>
<p>Some Content</p>
</div>
</div>
Less:
#MainBanner {
position: relative;
height: 100vh;
overflow: hidden;
video {
background: url(cover.jpg) no-repeat;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
}
.content {
position: absolute;
padding: 20px;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
}
}