You can use media queries to use src or other content based on its definition. Check out this article on CSS-Tricks: https://css-tricks.com/video-source-by-screen-size/ However, it looks like this isn't a stable feature on all browsers.

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

As mentioned in the article, another method is to use JavaScript to change the src of the video based on the viewport size.