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

2 Answers 2


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.


  • aha, thanks, i will check this a few hours later, need to go out right now Feb 7, 2017 at 9:13
  • It seems like twenty seventeen switches from video to image on 768px width, and as far as i can see, this is hardcoded. So i ended up by programming - what i needed - myself Feb 15, 2017 at 6:59

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

So, the code becomes:

  //show image
 // show video
  • Sorry i know that i can use IF or media query, but i am asking for a better solution than this. Twenty seventeen is using a function the_custom_header_markup() to create the headers, and i would like to do it that way somehow for the best practice Feb 7, 2017 at 8:04
  • Man. I wish I'd found this earlier. Great way to serve different headers depending on device.
    – Lisa
    Jul 29 at 5:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.