I'm building a fairly simple site with just a header centered on the top that sits over a full screen image. Behind the image is a full screen Vimeo video. My goal is to have it so that when I scroll, the image moves up and off the screen to reveal the video behind it, and then continue normal scrolling to any elements below the video. I'm newer to WebDev so I'm really just looking for a place to start. I'm fooling around with some positioning and transtionZ CSS etc. but I can't get it to work.
Related
I am creating a website the my nav bar which is two images is not loading. The two images flash up in their right places with a white background before the rest of the website loads.
See code below
https://wtools.io/paste-code/bJ9n
https://wtools.io/paste-code/bJ9m
Image I want loading in nav is drum stick
I tried Z axis.
The image loads when in a different div but it’s not in the right place and the website isn’t as responsive with it.
I am making an html webpage with a video in the background and would like to accomplish the following using CSS:
The video keeps its aspect ratio
The video fills the width of the screen
At relatively large window size the whole video is visible
The video has a minimum height (i.e. when the window is shrunk, at a certain size, the whole video is no longer visible).
There are elements positioned directly below the video, dynamically following it if the window is resized
It would also be nice if when the video is invisible it is centered (not crucial).
I've been trying this for ages now and have been able to get most of the points but not all of them; in particular I find the last point (positioning another element directly below) to be hard to combine with the others. I've been using the html video element and CSS.
Is this possible?
You can use a Jquery plugin for this. I recommend looking at this one in particular.
Vide - Jquery Plugin For Fullscreen Background Videos
I embedded a youtube video to a page using bootstrap's embed-responsive. When I resize the browser to fill the left half of my screen the video resizes correctly but when I resize the browser to fill the right-half of my screen or the top half the video doesn't resize and overlaps other content... Any idea how to fix this/why this is happening?
My code:
I am trying to use bootstrap's responsive-embed to embed a youtube video but for some reason it doesn't show on the page at all. I know it's on the page as I am using a screenreader which reads it and I can play it and hear the sound but visually it doesn't show at all.
Any idea what i'm doing wrong?
my code:
screenshots of the resized page:
https://www.sendspace.com/filegroup/8N0y4wQ5CwHATxM25UavWLvhrs7%2By5Wv
turn out I just had to remove the embed-responsive-item and the col-md-4 from the iframe
My website is http://www.clinkstr.com and I have 2 forms on the front page. When I zoomed all the way out in Chrome, the forms and the background will move down a lot. Can someone look at my CSS and HTML code and see if I did something wrong? And also, in IE, background-size: cover won't cover the entire screen when zooming in or out.
Its because you have absolutely positioned them making them not apart of the flow.
I want to put an embedded youtube video over the top of an image so it looks like there is a frame around the Youtube video. They are perfectly aligned horizontally, but I can't seem to align the video & image vertically. Somehow I need to add padding to the top of the Youtube video so it is lowered into the frame.
I'm using Wordpress and the measurements for the frame fit the video perfectly. I just need to lower the video into the frame.
Any ideas how to lower the Youtube video to make it align correctly inside the Frame?
Thank you!
You can use CSS to apply a margin or padding to the Youtube video HTML element (probably an iframe tag if you are embedding it)
So, your CSS may look something like this, depending on your HTML structure:
iframe { margin-top: 10px; }
You'll need to play around with the value of margin-top to make it align the way you like.
If you post the relevant HTML, I could give you specific CSS to use.