Kevin Powell - Community•4w ago

media query not triggering on source tag when page is resized

Is it expected behavior here for source to not change when screen is resized and use the source which matched when the screen size when page loaded?

<video>
    <source media='(min-width: 640px)' />
    <source media='(min-width: 1080px)'/>
    <source media='(min-width: 2000px)'/>
</video

<video>
    <source media='(min-width: 640px)' />
    <source media='(min-width: 1080px)'/>
    <source media='(min-width: 2000px)'/>
</video

I noticed that my browser isn't fetching the 1080 & 2000 request when i resize. Before i start debugging i'd like to do a sanity check and ask here if it's expected behavior or not

65 Replies

ἔρως•4w ago

you have a minimum width, but not a maximum width the other sizes won't load because the minimum 640px will always fulfill it

nookayiseeOP•4w ago

oh. i was in the tailwind mindset. thanks for pointing it out.

ἔρως•4w ago

you're welcome it's something easy to miss out

nookayiseeOP•4w ago

<source src={mobile} media="(max-width: 600px)" />
<source src={desktop} />

<source src={mobile} media="(max-width: 600px)" />
<source src={desktop} />

I'm gonna try this

ἔρως•4w ago

that probably won't do what you need in some aspects you should have a top and bottom limit as well depending on the needs by the way, on the question you have 640px, and on that last message you have 600px

nookayiseeOP•4w ago

no? ones the first one is false at 600px will it not default to the desktop version?

ἔρως•4w ago

that leaves 40px where there's no source that matches

nookayiseeOP•4w ago

yea I changed it completly . I'm still testing stuff. what i showed you is what i have on my code so you don't have to worry about me showing you different code then what's actually there.

ἔρως•4w ago

oh, well, which sizes do you have?

nookayiseeOP•4w ago

just one

nookayiseeOP•4w ago

but it's not defaulting to the desktop version when i resize to 1080. ill try adding a media to it now.

ἔρως•4w ago

that is interesting 🤔 i would expect it to do it, but maybe it doesn't because the media query is missing

nookayiseeOP•4w ago

<source src={heroVideoMobile} media="(max-width: 600px)" />
<source src={heroVideoDesktop} media="(max-width: 1080px)" />

<source src={heroVideoMobile} media="(max-width: 600px)" />
<source src={heroVideoDesktop} media="(max-width: 1080px)" />

still doesn't work. hmm

ἔρως•4w ago

try limiting from 600 to 1080 but obviously, over 1080 shouldn't work

nookayiseeOP•4w ago

yes. not sure what you mean? like setting a range?

ἔρως•4w ago

no, a media query

nookayiseeOP•4w ago

oh okay. I tried this

<source src={heroVideoMobile} media="(max-width: 600px)" />
<source src={heroVideoDesktop} media="(min-width: 1080)" />

<source src={heroVideoMobile} media="(max-width: 600px)" />
<source src={heroVideoDesktop} media="(min-width: 1080)" />

and i set my page to 200px and reloaded. network tab downloads the mobile version. Then i resized to 2000px but network tab did not download the desktop version. typo 1 sec missed the px there

ἔρως•4w ago

1080 is not a valid value that was probably why it didn't work

nookayiseeOP•4w ago

still didn't work. let me quickly record a video. i have to be doing something very stupid here

ἔρως•4w ago

lets see

nookayiseeOP•4w ago

here you go

nookayiseeOP•4w ago

the cropped version is the mobile version and the hero-video is the desktop version.

ἔρως•4w ago

i think i know what it is

nookayiseeOP•4w ago

go ahead

ἔρως•4w ago

can you check the currentSource property of the video player?

nookayiseeOP•4w ago

from where? in tehh dev tools? oh wait i get it.

ἔρως•4w ago

yes and it's currentSrc instead

nookayiseeOP•4w ago

<video class="inline-block size-full object-cover" poster="/src/assets/hero/hero-image-poster.webp" autoplay="" disablepictureinpicture="" disableremoteplayback="" loop="" preload="none" playsinline="" aria-hidden="true">

 <source src="/src/assets/hero/cropped.webm" media="(max-width: 600px)">   
 <source src="/src/assets/hero/hero-video.webm" media="(min-width: 1080px)">

</video>

<video class="inline-block size-full object-cover" poster="/src/assets/hero/hero-image-poster.webp" autoplay="" disablepictureinpicture="" disableremoteplayback="" loop="" preload="none" playsinline="" aria-hidden="true">

 <source src="/src/assets/hero/cropped.webm" media="(max-width: 600px)">   
 <source src="/src/assets/hero/hero-video.webm" media="(min-width: 1080px)">

</video>

straight from the dev tools

ἔρως•4w ago

that's the html, not a property of the element https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentSrc

nookayiseeOP•4w ago

okay. brb

ἔρως•4w ago

that property should change

nookayiseeOP•4w ago

it does not hmm.

ἔρως•4w ago

honestly, i have no idea

nookayiseeOP•4w ago

a bug in html?

ἔρως•4w ago

no just weird shit and i don't see why it shouldn't work https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#using_the_media_attribute_with_video this is what you tried before

nookayiseeOP•4w ago

<body>
  <video width="1000px" height="1000px">
    <source
      src="./SaveInsta.App_-_3105876626936152910.mp4"
      media="(max-width: 600px)"
    />
    <source
      src="./rapidsave.com_hes_not_wrong_tho-5tsvvr800k1b1-360.mp4"
      media="(min-width: 1080px)"
    />
  </video>
</body>

<body>
  <video width="1000px" height="1000px">
    <source
      src="./SaveInsta.App_-_3105876626936152910.mp4"
      media="(max-width: 600px)"
    />
    <source
      src="./rapidsave.com_hes_not_wrong_tho-5tsvvr800k1b1-360.mp4"
      media="(min-width: 1080px)"
    />
  </video>
</body>

look at this. it's just an index.html i created and even this doesn't work. no react, vite, tailwind. nothing fancy

ἔρως•4w ago

that won't work because the video is 1000x1000

nookayiseeOP•4w ago

that's relevent?

ἔρως•4w ago

if im not mistaken, yes

nookayiseeOP•4w ago

removing it doesn't work either

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link href="css/style.css" rel="stylesheet" />
  </head>
  <body>
    <video>
      <source
        src=""
        media="(max-width: 600px)"
      />
      <source
        src=""
        media="(min-width: 1080px)"
      />
    </video>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <link href="css/style.css" rel="stylesheet" />
  </head>
  <body>
    <video>
      <source
        src=""
        media="(max-width: 600px)"
      />
      <source
        src=""
        media="(min-width: 1080px)"
      />
    </video>
  </body>
</html>

i removed the source tag while sending it to you can you try this exact code on your machine?

nookayiseeOP•4w ago

https://tenor.com/view/wtf-is-this-john-malkovich-what-the-hell-what-is-going-on-gif-15731558

Tenor

ἔρως•4w ago

it seems to only work on refresh

nookayiseeOP•4w ago

yep. same here.

ἔρως•4w ago

<video>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" media="(max-width: 600px)" />
<source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" media="(min-width: 920px)" />
</video>

<video>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" media="(max-width: 600px)" />
<source src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" media="(min-width: 920px)" />
</video>

i used this instead

nookayiseeOP•4w ago

lol is there a a big sos button that calls kevin

ἔρως•4w ago

i don't recommend it i do remember something like this before, somewhere i know he helped someone before with something sorta related (image instead of video) but it was a long time ago

nookayiseeOP•4w ago

any keywords that you remember from it?

ἔρως•4w ago

not really, it was more than 2 months ago probably was during the summer

nookayiseeOP•4w ago

i can't go digging if i don't know anyting about it. :/

ἔρως•4w ago

i know, but it's unrealistic to remember a random question from a while ago

nookayiseeOP•4w ago

https://discord.com/channels/436251713830125568/1222964697557368962/1222997676581453838 this was the only closest thingn i could find.

ἔρως•4w ago

wasn't that one, but that should help

simulant144•4w ago

I don't know officially, but from experience, I believe those media tags are only read on load and not on resize.

ἔρως•4w ago

that's what thee experiments show so far

nookayiseeOP•4w ago

someone shared this in the other server https://scottjehl.com/posts/responsive-video/

We're Bringing Responsive Video Back! | Scott Jehl, Web Designer/De...

Let's revisit responsive HTML video delivery and talk about when we can use it again and how close we are to cross-browser compatibility

simulant144•4w ago

Well that explains it.

ἔρως•4w ago

that shows the exact same behaviour

ἔρως•4w ago

once the large one is loaded, it stays there

nookayiseeOP•4w ago

i'll just set a one time self destructing event listener to load the desktop version of the video if the page is resized something like

function loadDesktop(e) {
     if (e.window.size > '600px'){
           videoTag.src = desktopVideo
           window.removeEventListener('resize', loadDesktop)
     }
}

function loadDesktop(e) {
     if (e.window.size > '600px'){
           videoTag.src = desktopVideo
           window.removeEventListener('resize', loadDesktop)
     }
}

if ya'll got any other ideas let me know

ἔρως•4w ago

yeah, implement something that does this for you or use an already existing project that does all for you

nookayiseeOP•4w ago

i couldn't find any public projects that do this. I'll just have to implement it on my own.

ἔρως•4w ago

you can easily implement this

nookayiseeOP•4w ago

yea

Gaming

Programming

media query not triggering on source tag when page is resized

Did you find this page helpful?