Unfortunately, videos don’t play perfectly on smaller mobiles but there is a solution. Add a image or animated gif once your website is reduced to a specific width.
If you’ve added a video as the background to a widget area, like done here in the Digital Pro child theme by StudioPress, you can also add a fallback image.
Here’s the fallback image tested using Digital Pro at 800ps width:
And here’s the very simple solution you can add to your style sheet.
@media only screen and (max-width: 800px) {
.video-overlay {
background-image: url('http://wpsites.dev/wp-content/uploads/2017/03/source.gif' );
}
}