Video background not responsive - by Steffen

This topic has 17 replies, 4 voices, and was last updated 8 years, 4 months ago ago by Eva Kemp

  • Avatar: Steffen
    Steffen
    Participant
    October 12, 2015 at 11:09

    we set video background, but
    – the video ist not responsive, when getting smaller (we magend now that this is not bigger than 1200px, but we stilol have a problem with mobile browsers)
    – the video is not shown on some mobile devices, e.g. iOS-devices)

    Please, contact administrator
    for this information.
    16 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    October 12, 2015 at 13:51

    Hello,

    Try to use this code in Theme Options > Custom CSS > Custom CSS for mobile:

    .upb_video-src {
        max-width: 100% !important;
    }

    Concerning the video not displaying on iOS devices please refer to this article:
    http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

    Displaying the fullscreen background video on mobile devices presents several challenges:

    Most mobile platforms (iOS in particular) will refuse to autoplay HTML5 video to avoid potentially ruinous data charges.
    In such cases the video will be displayed with an embedded play button, which in turn…
    …may capture touches on the device, locking out links that may be in the content on top of the video.
    While it is possible to feature-detect support for video autoplay with JavaScript (a technique I will cover in a future article), the easiest solution is to use a media query that switches off the video entirely on smaller screens, substituting the placeholder image in the background.

    Regards,
    Eva Kemp.

    Avatar: Mem0rex
    Mem0rex
    Participant
    October 13, 2015 at 11:59

    I have also the same problem on the mobile devices.

    But what I wonder, if I use your video, it will be displayed on the iPad. When I use my video it is not displayed.

    My video is like your video in mp4 format.

    http://www.alexander-shorokhoff-boutique.de/

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    October 13, 2015 at 12:08
    Avatar: Mem0rex
    Mem0rex
    Participant
    October 13, 2015 at 13:35

    Hi Jack,

    thanks I will look at that.

    Avatar: Eva
    Eva Kemp
    Support staff
    October 13, 2015 at 14:27

    Hello @Mem0rex,

    You’re welcome.

    Regards,
    Eva Kemp.

    Avatar: Mem0rex
    Mem0rex
    Participant
    October 13, 2015 at 15:32

    I do not create this.

    I do not know what it could be.

    I have converted the video in the Different format but I just do not get out.

    Avatar: Steffen
    Steffen
    Participant
    October 13, 2015 at 18:40

    Hi Eva,

    that works with the css style, thank you, but now I got a big margin when making the window smaller. I set the height of the video with padding-top and padding-bottom, but now, these values are obviously fixed. Is the any other wax to set the standard heigt of the video, when the text in front has less height, which is also responsive compatible?

    Avatar: Eva
    Eva Kemp
    Support staff
    October 14, 2015 at 08:24

    Hello @porath,

    Try to use this code in Theme Options > Custom CSS > Custom CSS for mobile:

    .vc_custom_1444757767611 {
        margin-top: -45%;
        margin-bottom: -50%;
    }

    Regards,
    Eva Kemp.

    Avatar: Steffen
    Steffen
    Participant
    October 19, 2015 at 17:35

    Thank you Eva,

    but this does not help. What can I do to set a height for the backgound without getting big edges on top and bottom? I try to set padding-top and -bottom to see the full video, but this brings edegs on small windows/mobile versions.

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    October 20, 2015 at 13:04

    Hello,

    You’re using old theme version.
    Please update it to the latest version 2.3 and Woocommerce as well.
    Before update delete “woocommerce” folder in the directory wp-content/themes/royal/ and it’ll be reuploaded from a new theme package.
    Also update all required plugins https://www.8theme.com/download-plugins/ .

    Don’t forget to create back up of your files and database before starting update process!

    Best regards,
    Jack Richardson.

    Avatar: Steffen
    Steffen
    Participant
    October 29, 2015 at 16:45

    I now updated the while theme, woocomeerce should be independet. The video has still bis margins on top and in bottom.

    Avatar: Eva
    Eva Kemp
    Support staff
    October 29, 2015 at 18:14

    Hello,

    Now htaccess authorization is incorrect.
    Please provide us with correct login details.

    Regards,
    Eva Kemp.

    Avatar: Steffen
    Steffen
    Participant
    November 4, 2015 at 10:12

    the new theme worked worse than the older one, also with other plugins, so we went back to to version before.

    Anyway, behaviour did not change in any version. With your last css trick it is now getting smaller when the window becomes smaller size, so far so good, but the paddings on top and bottom still remain. In result we got big edges when getting smaller windows.

    A solution could be to set the native height of the video wirthout doing this over padding values, but I did not find a possibility therefore.

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    November 4, 2015 at 11:05

    Hello @porath,

    Please provide us with correct wp-admin panel credentials in Private Content.

    Regards,
    Eva Kemp.

    Avatar: Steffen
    Steffen
    Participant
    November 10, 2015 at 17:37

    please see data in private

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    November 10, 2015 at 19:49

    Hello,

    I’ve added this code in Custom CSS for mobile:

    .vc_custom_1446627747189 {
        margin-top: -80%;
        margin-bottom: -68%;
    }

    Please check video on mobile now.

    Regards,
    Eva Kemp.

  • Viewing 17 results - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.