How can a responsive area be set to maximum or minimum width

Question

I have used a Drupal module to configure videos to be responsive, and in this case the method used sets the video to be as wide as the screen, as described in this Drupal question - Can an embedded video be made responsive?

It is fine on mobile phones but on laptops and desktops the videos expand to fit the whole screen, making them too big and grainy as well. What kind of CSS can I use to set a limit on desktops and laptops while keeping the responsive option on mobile phones?

Answer 1

You can either dynamically set the height/width of the video, or you can have a div around it with a max-width, for example:

<div style="max-width: 500px;">
    <video/>
</div>

Or something like:

<video style="width: 854px; height: 480px;"></video>