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

WP SITES

2670

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Tutorial Requests
  • Contact
  • Videos
  • Tags
  • Log in

Premium Member? - Request custom code

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 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

Brad Dalton Specializes In Genesis child theme customization & code modification. Read More…

Learn PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems