Change Video Background to Full screen

Home Forums WordPress Theme Gather – Event & Conference WP Landing Page Theme Change Video Background to Full screen

This topic contains 19 replies, has 2 voices, and was last updated by  tom4lfc123 1 month, 3 weeks ago.

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #14658

    tom4lfc123
    Participant

    Supported

    Hello,

    How can I fit the video background to fit the screen?

    Thanks

    #14661

    tom4lfc123
    Participant

    Supported

    As you can see the video background is only covering half the page.

    Screenshot: http://prntscr.com/fs1fg2

    Thanks

    #14673

    CTHthemes
    Keymaster

    Please increase the section height to larger value so section_height/section_width = video_height/video_width (background section has the same ratio as video)

    #14708

    tom4lfc123
    Participant

    Supported

    Where do I apply this code?

    #14724

    CTHthemes
    Keymaster

    Add your css style to Gather Options -> Custom Code tab.

    #14744

    tom4lfc123
    Participant

    Supported

    When I add the code to Custom Code tab I get a red cross and nothing changes on the website.

    Screenshot: http://prntscr.com/fuic4l

    Am I suppose to add anything else?

    #14756

    CTHthemes
    Keymaster

    It’s not code. Just shown you how to get the code.
    Send me your link to help.

    #14771

    tom4lfc123
    Participant

    Supported
    This reply has been marked as private.
    #14784

    CTHthemes
    Keymaster

    Use this style:

    
    .header-video-module.youtube-video-bg .header {
         padding: 180px;
    }
    

    this code will extend the header height to 800px;

    #14800

    tom4lfc123
    Participant

    Supported

    It doesn’t look right. I just want it to work the same way it does in the demo and be the same size.

    Home – Youtube Video Background

    #14808

    CTHthemes
    Keymaster

    It’s not possible.
    The demo video is also cropped: https://www.youtube.com/watch?v=BsekcY04xvQ&feature=youtu.be

    You have to expand the height or it still crop

    #14821

    tom4lfc123
    Participant

    Supported
    This reply has been marked as private.
    #14825

    CTHthemes
    Keymaster

    As you can see demo video on Youtube, it’s square. So in the demo page video details is also cropped.
    And the video doesn’t work on real mobile devices, displaying background image instead.

    Hope you understand.

    #14833

    tom4lfc123
    Participant

    Supported

    You are not understanding what I mean.

    Look at the mobile screenshot and you will see the buttons are not in the the centre. When I add the style which you suggested it works on desktop but when you view on a mobile screen the buttons are pushed over to the right.

    Please look at the screenshot and you will see what I mean.

    Thanks

    #14840

    CTHthemes
    Keymaster

    Use this style instead:

    
    @media (min-width: 992px){
      .header-video-module.youtube-video-bg .header {
         padding: 180px;
       }
    }
    
    #14949

    tom4lfc123
    Participant

    Supported

    Hello,

    Thank you for that. How can I make the logo and buttons automatically centre themselves?

    If you look at the website on a desktop it sometimes is off-centre.

    URL: http://www.theforeverland.com

    Thanks

    #14958

    CTHthemes
    Keymaster

    They’ve already aligned center.

    #14964

    tom4lfc123
    Participant

    Supported

    When viewed on smaller 13″ laptop/notebook screens the logo is off center. Is there a way I can resolve this by adjusting the CSS?

    Thanks

    #14965

    CTHthemes
    Keymaster

    Use this style

    
    .header.header-video > .container {
         width: auto;
    }
    
    #14979

    tom4lfc123
    Participant

    Supported

    Thank you

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

You must be logged in to reply to this topic.