I was hoping someone knows a way I can make my video responsive. I want the “mobile” size to be 500px straight (no responsiveness) but when we reach the large screen I would like the max-width to be 1065px and for it to be responsive if the screen is below that. It could make more sense if you check out the codepen below.
Please note I’m still fairly new so my code is still written not as good as when I have more experience. Thanks!
I’m not quite sure of what you want to say 500px straight but no responsiveness . If you just want to make it responsive then you have to make mobile first approach from the initial designing point if you try to make the page responsive after you done with the whole site in desktop browser then it does not work quite well and you have to rely on too many media queries.500px at this point and 1065px at this break point - thats not how you should go for responsiveness. Even tho i didn’t get what you want to achieve; i did made some enhancements to some things which seemed wrong to me. You can take a look Here.
Since you used too many media queries i could not make any more changes ,as it would break the page.
Exactly the response I was looking for! That’s really great. I definitely didn’t ask correctly but super cool! Ill analyze it now and hopefully will see how I approached the responsiveness incorrectly.
One question though… why did you choose that height for the video? Was it for a reason?
oh sorry.I didn’t notice the height question. I just made it responsive. There is no issue with the height you can play around with it and see what fits your needs. Just always keep it simple