Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Adam Smallman
Adam Smallman
4,182 Points

<video> Very slow and choppy

I have a full background video on my website. The problem I am having is that the video footage is very slow and choppy. Can any one help ? Thanks

Link to site (http://brothersindesign.com/) 

<!DOCTYPE html>
<html>
<head>
    <title>BrothersInDesign.com</title>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/text.css" rel="stylesheet">
    <link href="css/stylesheet.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel=
    'stylesheet' type='text/css'>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript"></script>
</head>
<body>
    <div class="wrap">
        <div class="videoContainer">
            <video autoplay="" loop=""><source src="vid/bg.mp4"> <source src=
            "vid/bg.webmhd.webm" type='video/webm; codecs="vp8, vorbis"'>
            <source src="vid/bg.oggtheora.ogv" type=
            'video/ogg; codecs="theora, vorbis"'></video>
        </div>
        <div class="head">
            <div class="logo"><img src="img/logo.png"></div>
            <div class="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Our work</a></li>
                    <li><a href="#">Photography</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="links">
                <ul>
                    <li>
                        <a href="#"></a>
                        <div class="f"><img src="img/f.png"></div>
                    </li>
                    <li>
                        <a href="#"></a>
                        <div class="t"><img src="img/t.png"></div>
                    </li>
                </ul>
            </div>
        </div>
        <h1>COMING SOON</h1>
    </div><!-- END wrapper -->
</body>
</html>

html,body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.wrap {
    width: 100%;
    height: 100%;
}

.videoContainer {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: -1;
}

.videoContainer video {
    min-width: 100%;
    min-height: 100%;
}

.head {
    width: 100%;
    height: 4em;
    background-color: #000;
    position: relative;
}

.head .logo img {
    width: 229px;
}

.head .logo {
    position: relative;
    left: 3em;
    top: 1em;
    opacity: 1;
    width: 229px;
}

.head .menu {
    margin-left: 61em;
    position: relative;
    bottom: 6.4em;
    width: 40em;
}

.head .menu ul {
    width: 40em;
}

.head .menu ul li {
    display: inline-block;
}

.head .menu ul li a {
    color: #fff;
    text-decoration: none;
    font-family: Oxygen, sans-serif;
    font-weight: 300;
}

.head .links {
    position: relative;
    left: 90em;
    bottom: 6em;
    width: 10em;
    height: 2em;
}

.head .links ul {
    width: 10em;
    text-align: center;
}

.head .links ul li {
    display: inline-block;
    margin: auto;
    padding-left: 1em;
}

.head .links ul li a .f img {
    width: 10px;
    height: 22px;
    margin-top: 6px;
}

.head .links ul li a .f {
    width: 2.5em;
    height: 2.5em;
    background-color: #000;
    border-radius: 20px 20px 20px 20px;
    opacity: 0.50;
    text-align: center;
    position: relative;
    bottom: 1px;
}

.head .links ul li a .f:hover {
    opacity: 1;
}

.head .links ul li a .t img {
    width: 24px;
    height: 22px;
    margin-top: 7px;
}

.head .links ul li a .t {
    width: 2.5em;
    height: 2.5em;
    background-color: #000;
    opacity: 0.50;
    border-radius: 20px 20px 20px 20px;
    text-align: center;
    position: relative;
}

.head .links ul li a .t:hover {
    opacity: 1;
}

h1 {
    color: #fff;
    font-family: Oxygen, sans-serif;
    font-weight: 600;
    margin-left: 4.5em;
    font-size: 6em;
    margin-top: 3em;
    opacity: 0.60;
}

@media only screen and max-width 1280px {
    .head .menu {
        margin-left: 55em;
        position: relative;
        bottom: 6.4em;
        width: 40em;
    }

    .head .links {
        position: relative;
        left: 84em;
        bottom: 6em;
        width: 10em;
        height: 2em;
    }

}

@media only screen and max-width 1152px {
    .head .menu {
        margin-left: 45em;
        position: relative;
        bottom: 6.4em;
        width: 40em;
    }

    .head .links {
        position: relative;
        left: 74.5em;
        bottom: 6em;
        width: 10em;
        height: 2em;
    }

}

@media only screen and max-width 1024px {
    .head .menu {
        margin-left: 35em;
        position: relative;
        bottom: 6.4em;
        width: 40em;
    }

    .head .links {
        position: relative;
        left: 64.5em;
        bottom: 6em;
        width: 10em;
        height: 2em;
    }

}

@media only screen and max-device-width 480px {
    .head .logo img {
        width: 229px;
    }

    .head .logo {
        position: relative;
        left: 0;
        top: 1em;
        opacity: 1;
        width: 100%;
        text-align: center;
    }

    .head .menu ul li {
        display: block;
        text-align: center;
    }

    .head .menu ul {
        width: 100%;
    }

    .head .menu {
        margin-left: 0;
        position: relative;
        top: 3em;
        right: 1.1em;
        width: 100%;
        text-align: center;
    }

    .head .menu ul li a {
        color: #fff;
        text-decoration: none;
        font-family: Oxygen, sans-serif;
        font-weight: 300;
        font-size: 1.5em;
    }

    .head .links {
        position: relative;
        left: 0;
        bottom: 6em;
        width: 10em;
        height: 2em;
        display: none;
    }

}

1 Answer

Michael Austin
PLUS
Michael Austin
Courses Plus Student 7,814 Points
Michael Austin
Michael Austin
Courses Plus Student 7,814 Points

Hi,

This is purely a preload issue. The video is loading frame by frame, as the website can’t serve the file quick enough. I would look at optimisation of the video itself, set preload=‘auto’ on the video tag and also look at https://flowplayer.org/player/ to serve up alternative video for IE.