Create Full Screen Background video

[Stephanus]

Hi there,

Is it possible to create a full screen background video on my home page (and to do so with controls so that the user can pause and/or mute the video, etc.)? I’ve tried to do so using the Revolution Slider, but without success. Also, the Revolutions Slider’s video settings do not have ‘mute’ selected, and yet my video is muted.

I want to add and have control over the video on my wife’s website http://www.happyandhealthy.co

I’ve looked for tutorials everywhere, but couldn’t find anything that would help me to do this.

Kind regards,

Stephanus

[Stephanus]

Hi there (related to my question above), how did you add this video?

http://seventhqueen.com/themes/kleo/portfolio/video-background-header/

If you can add this with a Parallex effect and the sound controls, that would be awesome.

Kind regards,

Stephanus

[Kamal]

Hello Stephanus,
You can add video background to your site in the following way. You can add it using revolution slider with full control over it. and you can also add video background like the link you shared in your second video using a short code on a fullwidth template. If you want to add video background like on our demo page then you can use this short code on you home page and you can edit the source of the video to your own video. You can place this code on top of all code using classic editor. Here is the code:

COPY CODE

[vc_row inner_container="yes" section_type="main" type="video" bg_position="top" bg_position_horizontal="left" bg_repeat="no-repeat" bg_cover="true" bg_attachment="false" parallax_speed="0.5" min_height="0" border="none" css_animation="right-to-left" bg_video_src_webm="http://seventhqueen.com/themes/kleo/wp-content/uploads/2014/09/video_street.webm" padding_top="0" padding_bottom="0" text_color="#ffffff" bg_video_src_mp4="http://seventhqueen.com/themes/kleo/wp-content/uploads/2014/09/video_street.mp4" bg_image="3214" bg_video_src_ogv="http://seventhqueen.com/themes/kleo/wp-content/uploads/2014/09/video_street.ogg" bg_video_cover="3203"][vc_column width="1/1"][kleo_gap size="200px"][kleo_gap size="30px"][vc_column_text css_animation="right-to-left"]

you can see the attachment file to see which code should be changed.
You can also embed youtube video like this if you want. If you have any question then you can ask me. Thanks.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Attachments:

You must be logged in to view attached files.

[Abe]

@Stephanus the video in the link above was added in the Row element. If you edit it you can set a Video background but it does not support parallax.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Stephanus]

This reply has been set as private.

[Abe]

Right now that is now available but we will consider it as a future functionality.

Thanks

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[wkd]

Hi, tried this but it didn’t work. I just got the code showing up on the front end. Still not sure how to set a video background. Nothing in the documentation about it, is there more detailed info about how to do this.. its a great feature

[Abe]

HI, you should import the demo portfolio page Video Background header and see the elements there:

http://seventhqueen.com/themes/kleo/portfolio/video-background-header/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[hartmania]

Hi Abe,

How can we get this demo to look at the code? It is not a page import option under the Kleo Demo data…

Thanks!

[Abe]

Hi, sure it is. Import the Portfolio post types or from any page edit using Visual composer choose that template. See the attached image

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

Attachments:

You must be logged in to view attached files.

[hartmania]

perfect— thanks keymaster!

[Abe]

Great that I could help!!

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts