Different views of videos | Desktop & Mobile

Hello all.
Is it possible to upload two different variants of a header video for desktop and mobile and play them out in the corresponding variant?
For example, a rectangular video in the desktop version and a square one in the mobile version?
I am also looking forward to your help.
Best regards
Dneise

Yes, you can of course upload multiple video variations (given they have different file names) and then use nested source tags inside the video tag to provide different video file formats and/or media queries, see <source>: The Media or Image Source element - HTML: HyperText Markup Language | MDN

Thank you for the answer.

The article you sent me looks more like providing different file formats for different browsers.

My question was more about whether I can upload a second version of a video that only plays in the mobile view of my website.

Maybe I just don’t understand it properly. Unfortunately, I have very little experience with Kirby. Is there such a code somewhere that I can use?

Thanks again!

Yes, the example is about different file formats, but as I wrote above, you can also use the media attribute to provide sources for different window sizes, see example here:

Notice that the media attribute, strictly speaking, should not have any effect when used on <source> in <video> elements. It may work in some browsers, but I wouldn’t rely on it. I don’t know why it’s spec’d like this, since the use case seems pretty obvious to me (showing portrait video in portrait viewports).
I guess your best bet would be to handle it via JavaScript.

For better understanding of what @texnixe meant with using the source element, see the explanation and demo (resize!) of the picture element.

But indeed what @rasteiner says is valid: It’s not according to spec unless you can do it within one source and the srcset attribute itself. But the art-direction use case isn’t that easy to do and requires JavaScript to work reliably. That is to prevent unnecessary video loads to happen when a media query change is triggered on mobile networks.

Excursus: However, I personally disagree here with the attempt of the spec to prevent this as people circumvent it using JavaScript and as it’s a use case that is valid.
But I remember all the discussion on art direction when the original picture spec was discussed in the WICG/WHATWG and can imagine that this is a compromise that made it to the spec.

Well, technically, only src and type are valid attributes for video <source>s, so the same applies to srcset.
While src is ignored in <picture>s, which fustrated me for some time. It took me way too long until I realized I couldn’t just do:

<picture>
  <source src="hello.avif" type="image/avif">
  <source src="hello.webp" type="image/webp">
  <img src="hello.jpg" type="image/jpeg">
</picture>

But had to use srcset even if the was not “set”.

1 Like