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
Aurelian Spodarec
10,801 PointsVideo position fixed
HI,
So I want to make a parallax effect with background-attachment fixed like on this page
but now i wnat to do it with video, but i can't figure out why it doesn't work.
<section class="video-background">
<video autoplay loop>
<source src="video/bg-city.mp4" type="video/mp4">
<source src="video/bg-city.ogg" type="video/ogg">
</video>
<!-- <audio autoplay loop>
<source src="sound/thunderstorm.wav" type="audio/wav">
<source src="sound/thunderstorm.ogg" type="audio/ogg">
</audio> -->
</section>
.video-background video {
background-attachment: fixed;
background-size: cover;
}
I tried many combinations. is there a specific thingy for videos?
3 Answers
Kevin Korte
28,149 PointsCheck out the code that has the parallax video. It appears they're basically giving the div element that is a wrapper to the video a fixed position.
Than the video itself it absolutely positioned, and than stretched to the bounds of it's parent element with this css
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: 0;
width: 100%;
height: 100%;
And they make sure it slides under the content by setting the z-index to 0, and the other content to a z-index of 1 or greater.
Kevin Korte
28,149 PointsThe link just links back to this post, so I'm not sure.
Aurelian Spodarec
10,801 PointsFixed it. Here is the video and the effect. http://couleecreative.com/
And here is exactly the effect i did before, but on Image https://aurelianspodarec.github.io/hcsurfing/
Aurelian Spodarec
10,801 PointsAnd now im trying to make the same effect with the video just like in those pages. The above code is what i currently have for my new page.
Kevin Korte
28,149 PointsWhere is the parallax code?
Aurelian Spodarec
10,801 PointsShoudn't this work? It did work always on my images.
background-attachment: fixed;
background-size: cover;
Aurelian Spodarec
10,801 Pointsbackground-attachment fixed is what used to place the images fixed. I can't do that on the video it seems.
Aurelian Spodarec
10,801 PointsHeres the github to it, it's loading these files, 80% ;d
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsAh, I did similar to this as well, but the text and everything bellow goes up and touches the header. I forgot about the z-index as well.
I will try to do It again when I'm going to finish most of the site. Since I'm annoyed with that video right now lol
Thank you.
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsSure no problem man. If you're annoyed with it (and that happens) work on some other stuff and circle round to this later when you're more refreshed.
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsDoesn't work : d heres the site online
I did make it position absolute at one point, and it ws fine, when i scrolled it stayed. Now, i set every item to be index 1 and this -2 and it was just fine. Now, when i scrolled thouhg, the background did show up. When i put it position absolute as well, all the text goes all the way up, every section, what would be a good way to push that back? the video is resposnive so any fixed value or % isn't any good i suppose.
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsI was actually doing it right. I managed to do it here. https://aurelianspodarec.github.io/hcchristmasite/
I set it to be position fixed, because with absolute that won't stay, although i have another idea on how i could try and make it, im not goint to try it now.
The way i solved it is that i put position fixed, and i put z-index to -1 AND no comes the magic, or the part, is that you need to set other elements to have a background, a background, otherwise if you set your body to white, you cover the video, if you put the whole content, you cover the video. So you can make soemthign like .bg-white { white bg } and apply it to where you need, or simply make a wrapper on the site, not including the video section, and set it to bg white. it willl make the effect as you see on the christmas site. I didn't find nor manage to do anything to be a attachment fixed like images are with the video. Video is more tricky to do, while images require one line of code.