<html>
    <head>
        <title>Fun Times</title>
        <style>
        *{margin:0;padding:0}
        html{overflow:hidden}
        html,body{height:100%}
        h1{font-size:2.5em}
        a{
            font-weight:600;
            color:#2e3436;
            padding:15px
        }

        body{
            font-family:"Open Sans",Helvetica,Sans-serif;
            background:#2e3436;
            color:#fff;

            overflow:hidden;
            overflow-y:auto;
            -webkit-perspective:1px;
            -moz-perspective:1px;
            perspective:1px;
            -webkit-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            transform-style:preserve-3d
        }
        .header-content{color:#2e3436}
        .content,.header-content{padding:8% 5%;text-align:center}
        .content div{max-width:700px;margin:0 auto}
        .parallax-container{height:400px}
        video{
            position:absolute;
            min-width:100%;
            min-height:100%;
            top:20%;
            left:50%;
            width:auto;
            height:auto;
            -webkit-transform:translateX(-50%) translateY(-50%) translateZ(-1px) scale(2);
            -moz-transform:translateX(-50%) translateY(-50%) translateZ(-1px) scale(2);
            transform:translateX(-50%) translateY(-50%) translateZ(-1px) scale(2);
            z-index:-99
        }
        </style>
    </head>
    <body>
        <a href="http://www.webtutorialsource.com/tutorial/parallax-image-and-video-with-css3-html5/" class="action-bt"><< Go back to article</a>
        <section class="parallax-container">
            <video loop muted autoplay>
                <source src="http://www.webtutorialsource.com/demo/parallax-image-and-video-with-css3-html5/loop-video.mp4" type="video/mp4">
                <source src="http://www.webtutorialsource.com/demo/parallax-image-and-video-with-css3-html5/loop-video.webm" type="video/webm">
                <source src="http://www.webtutorialsource.com/demo/parallax-image-and-video-with-css3-html5/loop-video.ogv" type="video/ogv">
            </video>
            <div class="header-content">
                <h1>Fun Times</h1>
                <p>Scroll down or up to see the effect (make sure your browser support video element). This time we're using a video only with HTML5 and CSS3.</p>
                <p>If your browser doesn't support <b>&lt;video&gt;</b> element then you just see an image as background.</p>
                <p><a href="http://www.webtutorialsource.com/demo/parallax-image-and-video-with-css3-html5/index.html" class="action-bt">Parallax With Image Background</a></p>
            </div>
        </section>
        <section class="content" style="background:#2e3436">
            <div>
                <h2>Demo Page With Parallax Effect</h2>
                <p>Adding a parallax effect on a background video really looks great.</p>
                <p>The great thing about this parallax tutorial is that it's very easy to implement on your existing page, and there is no need for JavaScript.</p>
                <br />
                <br />
                <br />
                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus nibh in rhoncus vestibulum. Morbi est dolor, ultricies vel mi vitae, fringilla faucibus tellus. Etiam congue ultrices nisl, finibus vestibulum nisl mattis quis. Donec non semper est, at tempus mi. Curabitur non risus diam. Cras id urna libero. Donec molestie, est non cursus gravida, leo nisi dignissim eros, pellentesque iaculis quam neque eu lorem. Nunc molestie eros massa.</p>

                <br />
                <br />
                <p>Pellentesque rutrum diam et porta elementum. Sed non sapien eros. Aliquam cursus eleifend nulla, id viverra ex commodo et. Donec lacus nisi, auctor ut mollis eu, iaculis tristique libero. Maecenas risus dolor, accumsan nec orci eu, sodales laoreet risus. Vivamus porttitor quam nunc, ac scelerisque orci interdum sed.</p>

                <br />
                <br />
                <p>Curabitur sit amet elit urna. Donec facilisis augue vel lacinia pulvinar. In lacinia et erat ut consectetur. Vivamus sit amet arcu nisl. Quisque ipsum nulla, malesuada vitae urna ac, placerat bibendum purus. Fusce ac vestibulum odio. Aliquam facilisis lorem metus, sit amet rhoncus dolor pharetra et. Nullam non nisi sit amet nunc dapibus interdum eget quis arcu.</p>
            </div>
        </section>
    </body>
</html>