TransWikia.com

video header in desktop view, image header in mobile view

WordPress Development Asked by user3199063 on December 12, 2021

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

2 Answers

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

Answered by Fujianto on December 12, 2021

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
}

Answered by Prasun Jajodia on December 12, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP