FallBack Image Replacing Video On Smaller Mobile Screens

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' );
    }
}

Related Video Solutions