• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • Replace Video With Image On Mobiles
  • Replace Video With Image When Genesis Mobile Menu Is Active Infinity Pro Front Page 1
  • Infinity Pro MP4 Video Background For Front Page 1 Widget
  • Add MP4 Video Background To Front Page 1 Widget In Altitude Pro Versions 1.1.3

Digital Pro Theme Video

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags