HTML5 media query video for different viewports (breakpoint not working)

Question

I am new to stackoverflow and I need some help in HTML5 and CSS3 as I am a newbie to responsive design / media queries. (I have used the forum search, but I couldn't find an answer on my question.)

I would like to display different videos for different viewports. Could you guys help me to fix the following HTML code:

video {
	width:100%;
	height:auto;
}

<div id="vid-container">
    <video id="video" controls>
        <source src="vid/video1.mp4" type="video/mp4" media="all and (min-width: 1024 px)">
        <source src="vid/video1.webm" type="video/webm" media="all and (min-width: 1024 px)">
        <source src="vid/video2.mp4" type="video/mp4" media="all and (max-width: 1023 px)">
        <source src="vid/video2.webm" type="video/webm" media="all and (max-width: 1023 px)">
    </video>
</div>

Thank you guys a lot in advance for helpfull tipps, tricks and answers. Cheers!

Answer 1

To create different quality settings for videos, it is often seen that the 'media' attribute is included in the source-tag (which may be nested in the video-tag; as above). Attention: This is not recommended by the W3C as well as not supported by some browsers, such as Google Chrome. Different video quality settings may get implemented by using JavaScript instead: Chrome not respecting video source inline media queries