In twenty seventeen, is there an easy way to show video header in desktop view, and show image header in mobile view ?
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
}
-
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 – user3199063 Feb 7 '17 at 8:04
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 – user3199063 Feb 7 '17 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 – user3199063 Feb 15 '17 at 6:59
