This topic has 11 replies, 5 voices, and was last updated 9 years by Abe.

  • Author
  • #35405
     Stephanus
    Participant

    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

    #35406
     Stephanus
    Participant

    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

    #35486
     Kamal
    Moderator

    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.
    #35535
     Abe
    Keymaster

    @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.

    #43739
     Stephanus
    Participant
    This reply has been set as private.
    #44437
     Abe
    Keymaster

    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.

    #49167
     wkd
    Participant

    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

    #50039
     Abe
    Keymaster

    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.

    #63271
     hartmania
    Participant

    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!

    #63411
     Abe
    Keymaster

    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.
    #63511
     hartmania
    Participant

    perfect— thanks keymaster!

    #63524
     Abe
    Keymaster

    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.

Viewing 12 posts - 1 through 12 (of 12 total)

The forum ‘KLEO’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?