Multiple media queries on one item - html

Question

Is it possible to have multiple media queries for one item in code?
Let me explain,
I'm trying to have a video background work on multiple devices, so far so good, it works, but when on mobile the majority of the video is cut off, same for tablet. So I have 3 videos, one full screen, one 960 x 540 and another 480 x 270. I want to set up a media query that will allow me to switch between these videos depending on the size of the screen. So far I have:
HTML:
<video autoplay="autoplay" loop="loop" class="bgvideo">
<source src="videos/videohd.mp4" type="video/mp4">
</video>
<video autoplay="autoplay" loop="loop" class="bgvideo-2">
<source src="videos/video960x540.mp4" type="video/mp4">
</video>
<video autoplay="autoplay" loop="loop" class="bgvideo-3">
<source src="videos/video480x270.mp4" type="video/mp4">
</video>
CSS:
#media (max-width: 960px) {
.bgvideo {
display: none;
}
}
#media (min-width: 960px) {
.bgvideo {
display: block;
}
}
#media (max-width: 960px) {
.bgvideo-2 {
display: block;
}
}
#media (min-width: 960px) {
.bgvideo-2 {
display: none;
}
}
#media (max-width: 480px) {
.bgvideo-2 {
display: none;
}
}
#media (min-width: 480px) {
.bgvideo-2 {
display: block;
}
}
#media (max-width: 480px) {
.bgvideo-3 {
display: block;
}
}
#media (min-width: 480px) {
.bgvideo-3 {
display: none;
}
}
I'm assuming there is an easier way to do this than what I am doing - as it doesn't work too well!
Thanks! ^^

Answer 1

you can simplify a bit your mediaqueries like this:
#media (min-width: 480px) {
.bgvideo-2 {
display: block;
}
.bgvideo-3 {
display: none;
}
}
#media (min-width: 960px) {
.bgvideo {
display: block;
}
.bgvideo-2 {
display: none;
}
}
#media (max-width: 960px) {
.bgvideo {
display: none;
}
.bgvideo-2 {
display: block;
}
}
#media (max-width: 480px) {
.bgvideo-2 {
display: none;
}
.bgvideo-3 {
display: block;
}
}