2017 Theme Banner Issue on Phone only

  • Love the 2017 Theme!

    In the theme – customize – header/media panel my mp4 video (2000 x 1200px) uploaded and shows up in the banner section on the computer and on the iPad as expected. However, it doesn’t show up on the iPhone version of the theme although it shows when I click the preview button in the header/media customize panel. I uploaded a photo using the interface below, thinking only photos would display on the smaller screen. It doesn’t display either. The very clean/nice default 2017 Theme image displays only. On my server, I went in to wp-content – themes – 2017 – assets – images and renamed the header file it insists on using and placed the file I want it to display in there, naming it header.jpg. It works. I tried uploading the mp4 video file named header.mp4. It doesn’t work.

    So, what’s the issue on the phone when I upload an image via the theme customization panel? Will a video not play on the phone? (The phone is fully capable of doing so.) And why doesn’t a photo uploaded in the header/media customize panel get used either?

    Am I just missing something basic, or is this a bug?

Viewing 4 replies - 31 through 34 (of 34 total)

  • What about Mobile First? Come on www.ads-software.com…I know you’re saying this is by design but if we’re to have Mobile First, should it work on mobile devices first? Let’s get this updated to a Mobile First design please.

    Hello, did anyone figure out how to have the video play on mobile?

    Google Pixel, Oreo 8.0, Chrome browser
    Phone Resolution: 1,440 x 2,560 pixels (534ppi)

    Is there any resolution to this issue? I am having the same exact issue and can not get the video header to play on any mobile device.

    Is there any work around this?

    Hi, I have been trying to fix this issue for quite sometime now also.

    https://cocoinnovations.com/

    Header video is just not playing on smaller devices (i.e. mobiles).

    I did however use CSS which made default ‘static’ image smaller on mobile on portrait orientation scale/smaller BUT there is a large gap between the bottom of the static image and following content. Here is CSS for this mentioned resolution (“scale” static image):

    @media screen and (max-width: 480px) {

    .has-header-image .custom-header-media img,
    .has-header-video .custom-header-media video,
    .has-header-video .custom-header-media iframe,
    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    height: auto;
    left: 0;
    max-width: 100%;
    min-height: 0;
    -o-object-fit: unset;
    object-fit: unset;
    position: relative;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    }
    }

    I look forward to hearing a solution in relation to:
    1). Playing & Scaling Header video in Mobile and Tablets; and
    2). Hopefully alleviate large unsightly gaps surrounding video.

Viewing 4 replies - 31 through 34 (of 34 total)
  • The topic ‘2017 Theme Banner Issue on Phone only’ is closed to new replies.