one pager lässt sich nicht scrollen

    Hallo liebe Forumsmitglieder,

    ich habe folgendes Problem beim erstellen eines one pager. Ich hoffe jemand kann mir helfen. Ich will als Startseite ein Video abspielen lassen (was auch funktioniert)
    ,wenn man dann weiterscrollt soll auf der "nächsten Seite" ein Bild erscheinen im Vollformat. Mein Problem gerade ist, dass ich zwar das Video und das Bild einbinden kann, aber ich nicht nach unten scrollen kann. Ich kann also nicht zum Bild scrollen und sehe es nur am unteren Rand des Browsers. J-Query will ich hier benutzen um möglichst elegant von einer section zur nächsten section zu gelangen, aber auch ohne die Einbindung von jquery funktioniert das scrollen nicht.
    Ich habe hier mal meinen Code reinkopoert und würde mich freuen, wenn jemand eine Lösung kennen würde.

    Beste Grüße
    El Julio

    HTML Code:

    <!DOCTYPE html>
    <html lang="de">
    <head>
    <title> Menschen die nach oben starren</title>
    <link rel="stylesheet" href="onepage-scroll.css">
    <script language="javascript" type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.scrollify.min.js"></script>
    <script>
    $(function() {
    $.scrollify({
    section : "section",
    });
    });
    </script>
    <title> Menschen die nach oben starren</title>
    </head>


    <body>

    <section>
    <div class="container">
    <video autoplay>
    <source src="video/Anfang.3gp" type="video/3gp">
    <source src="video/Ufo_3.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>
    </div>
    </section>


    <section>
    <div class="zwei">
    <div class="container">
    <img src="image/ivan.jpg">

    </div>
    </div>
    </section>


    </body>
    </html>


    css-code


    body {
    background-color: #000000;
    width:100%;
    height:100%;
    overflow:scroll;
    margin-bottom: auto;
    }


    .container video{
    position:fixed;
    top: 50%;
    left: 50%;
    min-width: 75%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    margin: auto;
    }


    .zwei .container img {
    position:fixed;
    top: 50%;
    left: 50%;
    max-width: 120%;
    max-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    margin-top: 1000px;

    }