video header in desktop view, image header in mobile view

Question

In twenty seventeen, is there an easy way to show video header in desktop view, and show image header in mobile view ?

Answer 1

First, add video header support on your theme.

add_theme_support( 'custom-header', array(
    'video' => true
) );

Next, add the_custom_header_markup(); on Header area where you want to show the image / video header.

Finally, style your video header with some css like this.

.wp-custom-header iframe,
.wp-custom-header img,
.wp-custom-header video {
    display: block;
    height: auto;
    width: 100%;
        height: 400px;
}

The header will auto-switch to Image whenever user accessing your site from mobile devices. No need to add extra code to handle video / image banner switching.

Source

Answer 2

you can use the wp_is_mobile() to check if the user is viewing from mobile..

So, the code becomes:

if(wp_is_mobile()){
  //show image
}
else{
 // show video
}