New Landing › How can we help? › Themeforest Theme Support › Uplift › Full Width Video

Viewing 14 posts - 1 through 14 (of 14 total)
  • Back to forum
    Posted in: Uplift
  • June 29, 2016 at 7:47 am #277960
    ronin
    Member
    Post count: 282

    Hi,

    We’re after a full width video on the home page, but it seems to be stretching. Ideally we’d like the video to be width: 100% all the time, with a height that adjusts, whereas the default seems to stretch the video wider than 100%. I looked through previous questions and found a suggestion to add padding: 10%, which I’ve done – this makes the video the right width, but now the video is being pushed down the page, with the cover image showing up behind it. It’s also covering the text block underneath it.

    Any advice would be appreciated, thanks.

    June 30, 2016 at 10:21 am #278316
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    Are you using a Row to contain the video, have you tested using the Swift Slider?

    Please add a WP login for us to take a closer look.

    Thanks.

    July 1, 2016 at 12:12 am #278533
    ronin
    Member
    Post count: 282

    Hi,

    I’ve tried the swift slider and that worked perfectly, thank you.

    Just so you know, I was using a full width row with a video background, and that was what was causing the issue.

    Thanks

    July 1, 2016 at 2:58 pm #278683
    David Martin – Support
    Moderator
    Post count: 20834

    Great, thanks for reporting this back also.

    – David.

    July 15, 2016 at 6:01 am #281398
    ronin
    Member
    Post count: 282

    Hi guys,

    Sorry but I’m still having trouble with this. The swift slider works a lot better, but it still stretches the video. I’ve added some code in that makes the video always 100% width, but the slider is pulling a height from somewhere, so on smaller sized screens there’s a big gap underneath the video (pictured).

    It was important for the video to not be stretched as there’s text pretty close to the left side, so we’d like to keep that always visible. The width is working now, but if you could help us get the height to work, that would be great. Thanks

    Attachments:
    You must be logged in to view attached files.
    July 18, 2016 at 9:59 am #281901
    David Martin – Support
    Moderator
    Post count: 20834

    Is the video set to window height?

    Please add a WP login for us to take a closer look.

    Thanks.

    July 19, 2016 at 2:42 am #282147
    ronin
    Member
    Post count: 282
    This reply has been marked as private.
    July 20, 2016 at 9:59 am #282558
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    What screen size or device orientation do you see this on?

    I do see a large gap, however below the video the element has this CSS with is causing a large top/bottom margin:

    .spb_text_column {
    padding: 13em 0;
}

    The gap directly below the video is caused by your CSS:

    video.video, 
.swiper-slide.video-slide {
    width: 100%!important;
    margin: 0!important;
    height: auto!important;
}

    If you have to keep that CSS, then you could test using this for desktop:

    .spb_swift-slider.spb_content_element.col-sm-12 {
    margin-bottom: -13rem;
}
    July 21, 2016 at 1:12 am #282790
    ronin
    Member
    Post count: 282

    Hi David,

    Thanks for the reply.

    I had to put the following code in to keep the video full width at all times, otherwise the text gets cut off:

    video.video,
    .swiper-slide.video-slide {
    width: 100%!important;
    margin: 0!important;
    height: auto!important;
    }

    The gap is coming from the video’s predefined height of 923px, which I can’t set to auto without the entire video collapsing. The padding on the text column only accounts for a small amount of the gap (and is actually the desired gap).

    I tried your code (it is active in the pictures), but because the gap isn’t caused by the padding of 13em but by the video needing to be 923px, the gap just keeps increasing as you downsize the window.

    I could set different heights for the video at various break points, but I was wondering if there was something better I could do.

    Thanks again.

    Attachments:
    You must be logged in to view attached files.
    July 22, 2016 at 5:27 pm #283386
    David Martin – Support
    Moderator
    Post count: 20834

    Can you test adding this:

    video.video, 
.swiper-slide.video-slide {
    height: 100vh!important;
}
.swiper-slide.video-slide {
    height: 100vh!important;
    background-size: cover;
}

    Thanks.

    July 25, 2016 at 1:01 am #283496
    ronin
    Member
    Post count: 282

    Thanks David, but that just forces the placeholder image to be 100vh while the video stays the same proportion.

    July 26, 2016 at 10:37 am #283920
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    This is what I see for iPhone, iPad Mini and iPad:

    What screen size/device/orientation are you viewing this with? Might be better to remove your custom CSS during this time.

    Thanks,
    David

    August 1, 2016 at 5:17 am #285104
    ronin
    Member
    Post count: 282

    Hi David,

    iPad etc are fine, it’s more the various sizes of laptops and being able to resize your window and have the video remain the right proportions.

    August 2, 2016 at 9:33 am #285402
    David Martin – Support
    Moderator
    Post count: 20834

    Hi,

    Have you tested using the Rev Slider plugin, this allows for greater control of screen sizes and breakpoints for content.

    I am not sure I can suggest any more CSS to assist with this as this will only distort the video further.

    Thanks,
    David.

  • Back to forum
    Posted in: Uplift
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.