Offering Smaller Versions of Videos with Media Query or When Mobiles Are Detected

How to load different video for mobile devices and desktop web version?

I can think of one technique with two approaches.

First of all on your server side you could detect the user agent of the browser and if it matches against a mobile browser then you could change the src of the video to be your lower resolution one.

The second approach would be to use javscript / jQuery to detect if the user is using a mobile browser and do the same thing, change the src of the video to be the lower resolution one.

Can media queries resize based on a div element instead of the screen?

Yes, CSS Container Queries are what you're looking for. The CSS Containment Module is the specification that details this feature.

You can read more about the decade of work, including proposals, proofs-of-concept, discussions and other contributions by the broader web developer community here! For more details on how such a feature might work and be used, check out Miriam Suzanne's extensive explainer.

Currently only Chromium 105+ supports Container queries out of the box, though Safari 16 will include support as well. Hopefully it won't be much longer before we see a robust cross-browser implementation of such a system. It's been a grueling wait, but I'm glad that it's no longer something we simply have to accept as an insurmountable limitation of CSS due to cyclic dependencies or infinite loops or what have you (these are still a potential issue in some aspects of the proposed design, but I have faith that the CSSWG will find a way).

---

Media queries aren't designed to work based on elements in a page. They are designed to work based on devices or media types (hence why they are called media queries). width, height, and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. They cannot be used to refer to a certain element on a page.

If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries.

Alternatively, with more modern layout techniques introduced since the original publication of this answer such as flexbox and standards such as custom properties, you may not need media or element queries after all. Djave provides an example.

Do iPhone / Android browsers support CSS @media handheld?

You can use @media queries:

<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/>

This particular version will target the iPhone (and any other device with a screen of max-device-width of 480px.

Apple, for the iPhone, though this is from memory so I can't be entirely sure of its accuracy, chose to disregard the use of handheld or mobile stylesheets, since it, and other iOS devices, were capable of rendering css more or less on a par with desktop browsers, via Safari. For other devices I'm unsure, exactly, how faithful they are, though the A List Apart article (linked-to above) gives a brief run-through of some.

---

Edited in response to comment, from @Colen:

Hmm, it looks like a lot of new mobile devices have higher resolutions (e.g. droid X is 854x480). Is there any way to detect those? I don't think those are being handled with this query.

I'm unable to say for certain, since I've no access to those devices, however another A List Apart Article: Responsive Web Design notes that:

Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the promise of media types. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk.

So I presume that they, Android devices, must be target-able by @media-queries, but, as noted, I'm unable to say with any certainty.

To target device-resolution, there is an example of:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

Further reading: W3 Candidate Recommendation for media queries.

---

Related Topics