Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Background video with content at the bottom issue.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 3, 2015 at 12:37 am #194946
    cyberjo50
    Participant

    IM trying to make the bbottom content show up just about after the top div ends. Anyone can figure out how to do it?

    Here is what i got so far.
    http://jsfiddle.net/cyberjo50/4g660jgz/

    Thank you in advance!

    February 3, 2015 at 1:44 am #194948
    Shikkediel
    Participant

    That is in fact already the case but I reckon it’s not as intended. Could you explain how the layout should be looking exactly – is there the need to add a black background frame around the video?

    http://jsfiddle.net/4g660jgz/3/

    But from your previous topic I conclude the video needs to always be fullscreen? Then I’m sure sure where the next div should otherwise be.

    February 3, 2015 at 12:49 pm #195018
    Beverleyh
    Participant

    Going back to your original post here: https://css-tricks.com/forums/topic/anyone-know-any-tutorial-how-to-do-this-website/#post-194655
    where you aim to achieve this: http://awesomescreenshot.com/0fa4atfpec

    You seem to have strayed somewhat from the examples that I already linked to.

    From what I can see (and correct me if I’m interpreting it wrongly), if you take the source from here: http://fofwebdesign.co.uk/template/_testing/fullscreen-video/ but change “vid-wrap” from position:fixed; to position:absolute,
    And then add the markup+CSS for “content-underneath” from here: http://fofwebdesign.co.uk/template/_testing/fullscreen-img-content-below.htm, you have pretty much exactly what you need.

    February 5, 2015 at 11:23 pm #195201
    cyberjo50
    Participant

    Is this good?:
    <!doctype html>
    <html>
    <head>
    <meta charset=”utf-8″>
    <title>Untitled Document</title>
    <style>
    body, html {
    margin: 0;
    padding: 0;
    height:100%;
    }
    #videoContainer {
    height: 100%;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    }
    #myVideoBg {
    bottom: 0%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    z-index: -1000;
    overflow: hidden;
    object-fit: cover;
    position:relative;
    }
    #firstContent {
    width:100%;
    height: 100%;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    position:absolute;
    top:0px;
    }
    #secondContent {
    background:#007F79;width:100%;height:100%;
    height: 100%;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    }

    </style>
    </head>

    <body>

    First Contentxdfxdfgsdfgdfgdf
    sdf
    gsd
    fg
    sdfg
    sd
    fg
    First Contentxdfxdfgsdfgdfgdf
    sdf
    gsd
    fg
    sdfg
    sd
    fg

    </body>
    </html>

    February 5, 2015 at 11:24 pm #195202
    cyberjo50
    Participant

    i used the object-fit for the video to be resposive on any browser size.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.