Responsive full page video that can query additional edited versions for different devices

Question

I am trying to set up a home page with a background video that can grab different video edits as the browser widens. So far, i have been able to create the full page video and have edited the initial video to suit various breakpoints.

I understand that the video element does not accept srcset and have searched far and wide already. Does anybody know of a solution.

I'm doing this with a mobile-first development approach and for this particular video work, I would like to have breakpoints at 768px, 1200px & 1600px

Many Thanks

#myVideo    {
            z-index: -1;
              position: fixed;
              right: 0;
              bottom: 0;
              min-width: 100%; 
              min-height: 100%;
}

<video playsinline muted controls id="myVideo"
               src="video/COMP27home_loop_432x768.mp4" poster="images/home_loop_432x768_Moment.jpg">
          Your browser does not support HTML5 video.
            
        </video>

Answer 1

You must be read the documentation about the video tag.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

by reading doc u find their solution with there native things. You do not need to define a custom style or anything else.