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.

 

[AHarvey]

Have you checked out Bootstrap? Does all the resizing for you, documentation is ok but could be a lot more detailed.

 

[Russinating]

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

 

[kaku]

Read up on "CSS media queries". You shouldn't need any JS for this at all.

 

[antijoke]

You don't necessarily need Bootstrap either, just straight up media queries based on the browser width to show/hide/ change elements as required.

It's a little old but this will explain things for you.

https://www.smashingmagazine.com/20...s-to-create-a-mobile-version-of-your-website/

Once you get your head around min/max width you'll be flying.

 

[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.

 

[Etheco]

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.

 

[simisker]

...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.

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?

 

[Russinating]

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

 

[simisker]

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?

 

[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.

 

[simisker]

Ah, I see

I think it's the top padding that's causing the issue. If you need top/side padding, wrap within a further container and give THAT the padding.

 

[Cern]

Try max-height:auto on the iframe wrapper.

 

[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.