Return to previous page

Self Hosted Video Background Issues - by CIDesign_Media

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

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.

#62778 Copied Theme version: 1.6.1

8 Answers
Eva Kemp

Participant

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.
#63006 Copied
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!
#63269 Copied
Eva Kemp

Participant

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.

#63337 Copied

Eva Kemp

Participant

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.

#63420 Copied

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 😉

#63483 Copied

Eva Kemp

Participant

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.

#63486 Copied

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!

#64016 Copied

Eva Kemp

Participant

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.

#64025 Copied
Viewing 9 results - 1 through 9 (of 9 total)