Grow your CSS skills. Land your dream job.

video based site

  • # June 16, 2013 at 7:59 am

    I’m creating a website where the background basically uses a video.
    It’s all fine except when I change the size of my browser window there are black borders either at the top or the bottom.

    Any way around this? Maybe make the black background white to match the white in the video?

    [MOD EDIT - Link removed at OP's request]

    # June 16, 2013 at 8:12 am

    Set the width and height of the video to 100% in html.

    Then in css, set the height only to 100%.

    # June 16, 2013 at 8:19 am

    just got rid of the width in css and it made no difference

    #backgroundvideo {
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom:0;
    right:0;
    margin: 0;
    padding:0;
    width: 100%;
    z-index: -999;
    }

    # June 16, 2013 at 10:29 am

    this plugin could help you
    http://dfcb.github.io/BigVideo.js/

    if you have a look at their code can get an idea of how its done.
    they basically check to see if width > height then depending on aspect radio of the window and aspect radio of the video
    they apply a width and height and then center the video with some negative margins.
    all this to have your video displaying right and not streched

    # June 16, 2013 at 10:32 am

    Do this:

    .container{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    }

    # June 16, 2013 at 10:56 am

    I’m actually using a theme and uploaded the video through an admin control pannel. I found the code though:

    < ?php
    // Play Youtube and Other Video files
    if ($videofile) {
    ?>

    < ?php
    }
    ?>

    the css to that is:

    backgroundvideo {

    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom:0;
    right:0;
    margin: 0;
    padding:0;
    width: 100%;
    z-index: -999;

    }

    # October 11, 2014 at 5:46 am

    hi can i please get this thread deleted or the url i posted in the first post removed?

    Thanks.

    # October 11, 2014 at 6:23 am

    Done

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".