Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 6, 2015 at 7:33 pm #392228
    cberentz

    Hi,

    for my homepage I want to have about 50% of the (screen-)space, including the header section, with a full width video background. So I placed a Color Section at the top with my video as background – no problem.

    My problem is, that enfold always chooses the middle part of the movie (1280*720) and cuts off euqal parts at the top and bottom.

    Is it possible at all to change the portion of the video that is shown in this color section? Is there an option to choose where the clip gets cut (top/bottom)?

    Thanks in advance!

    • This topic was modified 9 years, 9 months ago by cberentz.
    February 6, 2015 at 10:16 pm #392297
    Josue

    Hi!

    The background element (in this case a video) gets stretched so it can fill the whole 50% height color section area in any screen, one thing you can try is set a limit to how much the video can get stretched, try adding this:

    #top .av-section-video-bg video {
    max-height: 819px;
}

    Regards,
    Josue

    February 7, 2015 at 6:14 pm #392531
    cberentz

    Hi Josue!

    Thanks for the quick reply!

    Mh I see what you mean and tryed your code, but it is not quite what i was aiming for :/

    If I limit the height this way it also limits the width and my goal is to keep it 100% width. The way it looked before adding the code was what I wanted, I just need to find a way to cahnge which part of the picture gets showen, like moving the “visible window” of the video a bit up or down.

    Is there some kind of command that for example makes the video picture start exactly at the top of the browser, so that only the bottom gets cut off when I limit the hight of the color section?

    Thanks a lot for the good work you guys are doin!

    February 10, 2015 at 5:33 pm #393806
    Andy

    Hi!

    I can’t see any video on your website so I don’t really see what you mean, but if you need 100% of width, you can try to add this to josue’s code:

    #top .av-section-video-bg video {
    max-height: 819px;
    width: 100%;
}

    Hope that helps.

    Cheers!
    Andy

    February 11, 2015 at 5:16 pm #394481
    cberentz

    Hi,
    thanks Andy, but your code also limits the width and doesnt really solve my “problem”.

    Anyway I decided to use a Fullscreen Video now. I created a color section with a video background because this gives me the possibility to use a revolution slider in a text filed within this color section. This way I have a slider on my video background.

    Works fine so far, only problem is that there is no option in the color section to allways show the video/section in fullscreen. I want it to be responsive so that the Video exactly fits each screen. The given options include only “at least 100%” and a fixed size.

    Is there any way to do this?

    Thanks!

    February 11, 2015 at 9:15 pm #394675
    Josue

    Hi!

    Try with this code:

    @media only screen and (max-width: 989px) {
    #av_section_1 .container {
        height: 650px !important;
    }
}

@media only screen and (max-width: 767px) {
    #av_section_1 .container {
        height: 450px !important;
    }
}

@media only screen and (max-width: 480px) {
    #av_section_1 .container {
        height: 250px !important;
    }
}

    Adjust as needed.

    Best regards,
    Josue

    February 12, 2015 at 1:42 pm #394973
    cberentz

    Ok thank you that worked. I defined heights for different width sizes and it seams to work. I had to use widht instead of max-width though cause otherwise it would just follow the highest max-width value.

    Last question: On mobile devices i wanna show a picture instead of the video and i checked the option to do that. Worked out.
    Problem is that you have to eather define a certain max-height or use the “at least XX% of browser” option – is there a way to have the image rezise responsivley, so that every device shows the full picture?

    Or as a work around is there a similar command like the one you posted above that does the same for pictures? So that I can set certain height values for different width-cases?

    February 12, 2015 at 8:33 pm #395306
    Josue

    Hey!

    Problem is that you have to eather define a certain max-height or use the “at least XX% of browser” option – is there a way to have the image rezise responsivley, so that every device shows the full picture?

    Problem is the image (or the video) is set as a background, not as an element so the height of the container is defined by the contents of the container, not the image. That being said, the codes i posted should work to adjust the height of the container in mobiles too.

    Best regards,
    Josue

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.