Good guide for dynamically resizing content

[Russinating]

Does anyone know of a good guide that details how to dynamically resize content and various examples? I'm not the best at Javascript; I can amend but not write from scratch.

And by dynamically resizing content YouTube is probably a fine example. So depending on the browser width resizing elements, removing them or changing them (for example the logo changing to a smaller version etc). The normal use is a full written nav turning into a 3-bar nav icon too.

Thanks in advance.

 

[Russinating]

Thanks, I'll take a look. I think I've done most of it manually that it's such a simple site.

 

[Russinating]

Gotcha. All over the CSS media queries now. I've used them before, BUT I didn't know about calc() which is useful.

One thing I'm really struggling with is displaying a YouTube video that scales whilst retaining its width:height ratio, and without cropping or going beyond the width/height of the screen.

Any ideas?!

Edit: That probably makes little sense, but for example with this code:

.videowrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
	margin-top:80px;
}
.videowrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

...when full width, the video height extends beyond the bottom of the viewport height. I want it to go as wide or as high as possible but without going off the bottom and retaining the ratio.

 

[Russinating]

Yeah, but it doesn't limit the height to the height of the window.

 

[Russinating]

No, I'm obviously not explaining myself very well .



The grey is the browser viewport, the red is the video. The top one, at full width the video extends off the bottom of the browser, whereas I'd want it to be limited by the height as per the bottom example.

 

[Russinating]

Doesn't work . It's usable at the moment, just not perfect, so I'll post a link once the site's live to see if anyone can shed some light once the code can be amended.