Good guide for dynamically resizing content

Russinating

Russinating

Russinating

Soldato
Joined
27 Dec 2005
Posts
17,310
Location
Bristol
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.
 
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:

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.
 
Last edited:
Do you need the video to play on the site? You could always load the video image and just link to youtube?

There seems to be set image links for all videos e.g. https://img.youtube.com/vi/<video_id>/0.jpg overlay maybe a playbutton ontop to make it look right.

At least this will play nicely with resizing, iframe videos can sometimes be problematic with resizing although it can be done.
 
Russinating said:
...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.
Click to expand...
That's what the padding-bottom % does in the wrapper: maintain the aspect ratio of the video "window".

This technique works; I've used it several times. Maybe you have some conflicting CSS?
 
No, because it can't flex to accomodate the video iframe content. That's because the iframe is absolutely positioned and therefore out of the document flow.

The wrapper is essentially empty, hence the need to add padding to the bottom to effectively force open a window onto the video.

The only time I would see this being a problem is if you were dynamically changing videos that have iframes with different aspect ratios. That'd be a javascript solution [and therefore beyond my knowledge!] Is that what you're trying to do?
 
No, I'm obviously not explaining myself very well :D.

8tXiv0K.jpg.png

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.
 
You must log in or register to reply here.
Back
Top Bottom