Return to previous page

Video background not responsive - by Steffen

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

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.

#93198 Copied

16 Answers
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.
#93248 Copied
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/

#93559 Copied

Jack Richardson

Support staff

October 13, 2015 at 12:08

Hello @Mem0rex,

Please refer to these articles:
https://confluence.atlassian.com/display/CONFKB/Unable+to+play+embedded+Mp4+videos+on+iPad+or+iPhone+in+Confluence
http://www.articulate.com/support/presenter-09/mp4-videos-require-a-mime-type-on-your-server-to-play-properly

Best regards,
Jack Richardson.

#93564 Copied

Mem0rex

Participant

October 13, 2015 at 13:35

Hi Jack,

thanks I will look at that.

#93593 Copied

Eva Kemp

Support staff

October 13, 2015 at 14:27

Hello @Mem0rex,

You’re welcome.

Regards,
Eva Kemp.

#93620 Copied

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.

#93649 Copied

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?

#93697 Copied
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.
#93752 Copied
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.

#94847 Copied

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.

#95082 Copied

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.

#96813 Copied

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.

#96841 Copied

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.

#97692 Copied

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.

#97702 Copied

Steffen

Participant

November 10, 2015 at 17:37

please see data in private

Please, contact administrator
for this information.

#98696 Copied
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.
#98719 Copied
Tagged: background, responsive, themes, video, woocommerce, wordpress
Viewing 17 results - 1 through 17 (of 17 total)