Self Hosted Video Background Issues - by CIDesign_Media

This topic has 9 replies, 2 voices, and was last updated 8 years, 10 months ago ago by Eva Kemp

  • Avatar: CIDesign_Media
    CIDesign_Media
    Participant
    May 8, 2015 at 19:24

    Hi,

    I have a self-hosted video background on my homepage. I have a couple issues with it that I would appreciate you checking out for me.

    1. The video does not display in Opera, and it is cropped strangely in Firefox. I have an .mp4 and and .ogv file format of the video, so it should cross-browser compatible.

    2. The video does not play on the my ipad here.

    3. For the iPhone the video is just a 2px line. There is no padding to show the video. And it is not playing.

    Could you please take a look and see if I am doing something wrong? Are video’s supposed to be able to play on mobile devices? Should I convert my video to .Webm?

    Video is located on homepage: http://jackspremium.com/

    Thanks!

    Please, contact administrator
    for this information.
    8 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    May 11, 2015 at 07:54

    Hello,

    The video is playing if you activate parent theme. So please check your customizations in the child theme.
    To show it on iPhone add this code to style.css of your child theme or custom.css of the parent theme:

    @media (max-width: 480px) {.content .home-video-section {
        padding: 80px !important;
    }}

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: CIDesign_Media
    CIDesign_Media
    Participant
    May 11, 2015 at 18:17

    Hi,
    Thanks! I had to modify your CSS a little, but it worked for me.

    @media only screen and (max-width: 768px) {
    .content .home-video-section {
      padding-top: 124px !important;
      padding-bottom: 40px !important;
      } }

    However, the video, now, is displaying a “play” icon on the iphone. When I tap play, it does nothing. Can you please help me with that?

    Thanks!

    Avatar: Eva
    Eva Kemp
    Support staff
    May 12, 2015 at 08:41

    Hello,

    I’ve checked the video and it’s working fine:
    http://storage4.static.itmages.com/i/15/0512/h_1431416333_2947294_6721a018d7.png

    Are you experiencing such problem on all mobile devices?

    Regards,
    Eva Kemp.

    Avatar: Eva
    Eva Kemp
    Support staff
    May 12, 2015 at 12:51

    Hello,

    Please check your video with default WordPress theme too.
    Is it working there?
    If it’s not you have to contact plugin developers because the video is added with element of Ultimate VC Addons plugin.

    Regards,
    Eva Kemp.

    Avatar: CIDesign_Media
    CIDesign_Media
    Participant
    May 12, 2015 at 16:39

    I don’t know what you have modified, but now the video isn’t even displaying a play icon. It is just displaying the video thumbnail.

    What device are you looking at the video on? Because it is not working for me.

    Also, the video is not working when I activate the parent theme. And I don’t appreciate you sending me to another developer to fix this. You have the Ultimate VC Addons plugin installed by default, so it should be 100% compatible with your theme. You should be able to help any issues.

    But it’s no big deal I will contact the plugin developers. It’s probably something I am doing wrong.

    Can you please send me the contact details for Ultimate VC Addons?

    Thanks 😉

    Avatar: Eva
    Eva Kemp
    Support staff
    May 12, 2015 at 18:17

    Hello,

    You can contact the plugin authors via comments http://codecanyon.net/item/ultimate-addons-for-visual-composer/6892199/comments .
    Also please read this article about video on mobile devices:
    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: CIDesign_Media
    CIDesign_Media
    Participant
    May 14, 2015 at 20:21

    Hi Eva,

    How can I hide the video on all mobile devices (ipad, iphone, galaxy tab & phones)?

    Thanks!

    Avatar: Eva
    Eva Kemp
    Support staff
    May 14, 2015 at 20:46

    Hello,

    You can edit row settings in Visual Composer editor:
    http://storage2.static.itmages.com/i/15/0514/h_1431632714_6025145_b7e7e36077.png

    Regards,
    Eva Kemp.

  • Viewing 9 results - 1 through 9 (of 9 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.