Forums

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

Home Forums CSS video based site

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #45567
    danielc2384
    Participant

    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]

    #138919
    CodeGraphics
    Participant

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

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

    #138920
    danielc2384
    Participant

    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;
    }

    #138935
    pixelgrid
    Participant

    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

    #138936
    CodeGraphics
    Participant

    Do this:

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

    #138938
    danielc2384
    Participant

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

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

    }
    ?>

    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;

    }

    #186021
    danielc2384
    Participant

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

    Thanks.

    #186036
    Paulie_D
    Member

    Done

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