Video Background Download 1.1

Indonesian Arsalan Shah 4 years ago

Add a video on landing page as a background. Video will be displayed in background if user screen is larger than 1000px in width.

Caution
Slower internet may face slow video, suggest you to use small video like around 1mb....

v1.1
*fixed height of signup form (choppy or half form displayed fixed)

Comments
gb TalkToAi Online Replied 1 year ago

Go to configure/settings of the component:
CUSTOMS CSS/JS
Copy paste this and change to your colours:

body {
background:#ADD8E6;
color: #0c0c0d; }
body.wpex-is-mobile-device .vc_video-bg,
body.wpex-is-mobile-device .wpex-video-bg-wrap {
display: block;
}

body {
background: url("http://talktoai.online/talktoai.gif") no-repeat;
background-size: cover;
}

.ossn-layout-startup {
background: none !important;
}

gb TalkToAi Online Replied 1 year ago

It works nice see my site https://talktoai.online works well with the fakebook theme my fav theme. The mobile view video background should not be that difficult to fix?

Snippets: Display Self-hosted Video Backgrounds for Mobile Devices

Important: This snippet is no longer needed! Videos will now display always by default?

This snippet allows you to display the video backgrounds on mobile devices which was previously hidden in versions lower then Total 5.0.8.

body.wpex-is-mobile-device .vc_video-bg,
body.wpex-is-mobile-device .wpex-video-bg-wrap {
display: block;
}

Snippet Type: CSS

Posted Under: Responsive

custom code could be added:
https://blog.hubspot.com/website/video-background-css

Indonesian Arsalan Shah Replied 4 years ago

Juan this component doesn't requires any configuration you can simply install and enable and it will show you a video background on your website.

ni Juan Berrios Replied 4 years ago

In every component you should have INSTRUCTIONS on how to use it.

This is a disgrace, with no instruction on how to edit or add video. I've spent hours to no avail.

French Loic germain Replied 4 years ago

Hello,

On the registration panel, the panels are placed over the top bar,

Can you fix the problem?

Thank you

us Greg King Replied 4 years ago

While this works as advertised, it killed my SSL certificate when I installed the SSL. It would not let it secure my website. When I disabled this component the SSL then worked perfectly. Not good.

gr Rafail Stratiotis Replied 4 years ago

Can the video not escape the footer? and not scrolling down?
that is, to be somewhat fixed on all screens
on the larger screens to expand and on smaller screens to condense

Indonesian Arsalan Shah Replied 4 years ago

Working with mobile is not that easy as it have small layout video is larger size, i am not sure how to fit video in mobile?

Tatar Steven downer Replied 4 years ago

@Darien,

I can see that the actual video to be used is in the VideoBackground/video path....

To "Install" a different video, my guess would be you simply change the sample "video" file to one of your own, but with the caution made by Arsalan above to be noted.

there are no options to "add" a video but by manually adding it, I suppose.

As the landing screen would be for all to see as well as could well be an "intro" video for some time to peak the interest of potential users, having an option to "install" videos at will would defeat the purpose, I have tested it on desktop machines and ipad (at 1024 but not working at 768px), but having issues with mobile use for obvious screen size problems below 1000px, as already indicated..

However, you should also look at the necessity to have a video at the lower resolutions whilst also trying to display the "Login" or "Create an Account" information on a mobile device....I feel, although it would be nice to have at the lower resolutions, a thought has to be put on the practicality of trying to fit all the information on smaller screens.........Just my view

jm Darien Brown Replied 4 years ago

also if you could get this to work on mobileit would be a gem

Component

Developer: Arsalan
License ossnv3
Type: Uncategorized
Requires Ossn Version : 5.0
Latest Version: 1.1
Last Updated 4 years ago
Repository Url View Repository

Versions