Video Collection Individual Video Page -- Changing the size of the video

My desktop users were complaining about the enormous full-width individual video size that displays when you click on a video in the video collection. I used this rough custom css to reduce the size:

.lesson-video-wrapper  {width:640px!important;
  height:360px!important;
  margin:5% 20%}

and the page now looks like the screenshot attached (or visit the page here:https://relspec.com/video-library/v/powerful-ultrasonics-clean-blind-holes). However, this has now messed up how the video looks on a mobile phone. I tried to refine with some @media statements but then everything reverts to the original 100% width. Any suggestions?

Must have had a mistake in my earlier @media statements as having the following seems to have solved the mobile display. Now I just need to define position and I will have it where I want it.

.lesson-video-wrapper  {width:640px!important;
  height:360px!important;
  margin:5% 20%}

@media only screen and (max-width:500px){
.lesson-video-wrapper  {
width:100%!important
}
}