Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #1178103

    Hi. Please bear with me while a witter on a bit.

    I’m trying to make a section for my site that has a video background, with a caption and button positioned bottom left over the top. I’m facing a couple of problems (mostly with the video but I’m not entirely convinced the issues aren’t related).

    Currently, I’ve built the section like this:
    Colour Section set to ‘No minimum height, use content within.. etc etc’ with a video background (using a video of Wayne’s World quotes as a placeholder until I finish the showreel I’m making), 16:9 ratio.
    Then over the top a 1/3 column with a text block inside containing the caption, and a button element. these are then being kinda ‘held down’ to the bottom by positioning a whitespace divider above them set to 80% height.

    My issues are as follows:

    The video doesn’t quite scale as I was hoping. By setting the aspect ratio I was hoping I was also setting the height of the colour section, but it appears that the column and divider are setting the height, meaning the video displays with black bands either side of it, as oppose to filling the section. If I set a pixel height for the colour section the video gets either cropped to the side or displays with black bands either side/top bottom depending on how you size the browser window. This is also happens if I set a % value.

    How can I set the colour section to have its size determined by the video, and be responsive? (if that makes sense…?) So the whole video displays in the section (not cropped on any edge and with no black borders). Is there any CSS that’ll sort this?

    Caption and button:
    Is this the best way to achieve the effect I’m after? I’d like the caption and button to sit bottom left over the top of the video. Is the way I’ve build this affecting how the video displays/is scaled?

    Hopefully that all makes sense and someone has a solution?

    Thanks In advance.





    By setting the aspect ratio I was hoping I was also setting the height of the colour section

    Sorry for the delay. The video will only inherit the size of the color section, which as you may have noticed gets its height from the content. One solution is to use the Fullwidth Slider instead of the color section. You will be able to set the video to match the size of the slideshow and cover it.

    Best regards,


    Perfect. That worked. Cheers.

    Is there any way to make a fullwidth caption not extend the width of the header? Could I make the caption half the width, for example? (So it’s like it’s in a two column layout.)




    Great! Glad it worked. To adjust or limit the caption width, please try this css code.

    .responsive #top .slideshow_caption .slideshow_inner_caption {
    	width: 50%;

    Best regards,


    Thank you. worked perfectly.



    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,


    Close away my good man!



    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Video background scaling in Colour Section’ is closed to new replies.