Full Screen Video Home Page

[ianbroadmore]

Hi Im a newbee to webdesign, I want to have a full screen video homepage that autoplays as soon as you go on it, then press ENTER to go to site. I have done a half based job but dont know how really to set it up. Any help appreciated

[rad]

Hi @ianbroadmore,

Thanks for reaching out.

You can do that with the slider’s full-screen feature. Please check this https://theme.co/docs/revolution-slider about the slider. For me with this setup, I would create a transparent background slider with a full-screen setting. Then instead of adding a background video to the slider, I would add it as builder’s background video.

Example,

1). Add Slider with transparent background and full-screen

2. Add a button layer with the label ENTER to the active slide of your slider, which of course, you must add the link where it should be redirected to once clicked.

3. Go to Admin > Pages > Add New and create a page named Home

4. Edit your created Home page in the builder and change it’s page layout to Blank - No Container | No Header, No Footer

5. Then add a section to your page and classic revolution slider element, selecting your created slider.

6. Then inspect your added section by clicking the magnifier icon

7. Then change your section’s padding to zero, and set your background video as shown here

8. Then this is optional since the full-screen slider send to ignore horizontal space, but if you see some spaces, then inspect your row the same way you inspect section, then disable your row’s container.

9. The last part is assigning your created Home page as home page, please go to Admin > Settings > Reading and assign your home page.

The reason I recommended the slider is because of its responsive nature, in which its offset and scaling automatically align based on device’s view.

Hope this helps.

[ianbroadmore]

hi thank you i will try this, it says i have to have a purchase code?
Sorry Ive given up I dont understand it, at all thank you

[tristup]

Hi @ianbroadmore,

Slider Revolution comes as a bundle plugin and does not need the separate validation. All the related upcoming updates will be provided by the theme itself.
You can still validate it by buying it from the plugin author.

Hope it helps.

Thanks

[ianbroadmore]

Thanks, ive tried no idea what im doing wrong but my screen does not match the screenshots above, so have given up on it as two complicated for a non wenb designer. Have to say I have another site on AVADA and its far simpler to do than this.

[rad]

Hi @ianbroadmore,

Sorry to hear that, let is know if you have further questions about those features just case you use it again. I understand that it might be confusing, but the same as other themes, it will require familiarization which isn’t possible overnight or few days, but it’s worth it once you’re able to utilize the flexibility and features of the theme.

Thanks!

[ianbroadmore]

Hi RAD , i dont want to give up!, in your original instructions with illustrations above is this all done in cornerstone including the slider creations? Is there a video showing how to create this? I created the slider ( I think) but cant figure out how to add in cornerstone? See Screenshot

Ian

[prakash_s]

Hi, @ianbroadmore,

Thanks for writing to us.
Please follow these steps.

1. The standard way of doing so is to use the Classic Revolution Slider element of the Cornerstone in the X and Content Builder
2. Search for the Classic Revolution Slider in the Elements tab of the builder to find the element and drag it to the page.

Please have a look at my screenshot

Now you can select the slider that you have created, please have look at the screenshot.
You can check our documentation for Revolution Slider so that you can add the Revolution Slider properly.

Thanks

[ianbroadmore]

Hi followed instructions, created slider etc but at point 6 above " click magnifier section1, and 7/change padding to zero" Those options are not available to me (see screenshots)
Ian

[prakash_s]

Hello @ianbroadmore,
Thanks for writing to us.

You are not able to see the “Inspect” settings( magnifier icon) of the “Section” the reason is you are already there in the “Section” as your screenshot suggest.
Now click “Design”

Please have a look at my screenshot.

Now you can set the padding value as “0”

If you are not able to see the padding setting please make sure you have set “Advanced Mode” as “ON”
Please have look at the screenshot to learn more how to set “Advanced Mode” as “ON”.

Thanks

[ianbroadmore]

Thank you, got it work fine and autoplay but doesnt play the background music or autoadjust for mobiles, and not full screen here www.ianbroadmore.co.uk

[friech]

Hi @ianbroadmore,

That is normal because of the browser’s autoplay policy. Please follow the link below for more details.

Autoplay Policy Changes  |  Web  |  Google Developers

Thanks,

[ianbroadmore]

Ok I get the autoplay for themusic/video, but what about the autosizing for different devices ie a mobile

[christian]

Hey @ianbroadmore,

By saying “autosizing” what exactly do you like to happen? Do you want to video to cover the screen? Or, do you like to show all parts of the video but accept that black bars are going to show up?

If you detail what your goal is, we could recommend settings and even simpler alternatives if available.

Please also check out the documentation by Themepunch regarding video backgrounds here https://www.themepunch.com/slider-revolution/slide-background/

And, give us the following info in a Secure Note

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thanks.

[ianbroadmore]

there is no secure note link on the reply!

[ruenel]

Hello @ianbroadmore,

You can insert the secure note by editing your previous reply or original post.
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[marc_a]

Hi @ianbroadmore,

I tried to access your website on an actual mobile device and the text of your video is just visible. It would be helpful if you provide us screenshot or video to determine your issue. Please check the screenshot below on the actual mobile device.

Hope that helps and let us know how it goes.

Thank you.