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!

Solution

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