I’m still very much new at HTML and CSS, so sorry if my question isn’t as sharp as it should be, but bear with me:
I currently have a video looping at the top of my web page, with a poster added. I want to make it so that the image I have set as a poster can be used as a replacement for the video when users are on a device with a maximum width of 940px. How do I do this? This is where my code is at so far:
HTML:
CSS:
video {
height: auto;
width: 100%;
}
@media only screen
and (max-device-width: 940px) {
.videos {
display: none;
}
#image {
display: inline;
}
}
@media only screen
and (min-device-width: 940px) {
.videos {
display: inline;
}
#image {
display: none;
}
}
What is wrong here? Now when I open the page, the video starts playing regardless of screen width.
