Why are my load times extremely slow for such a small site? I had hoped to display an image before the video loads, but they both seem to load simultaneously, even if the video takes forever to load.
This is my HTML:
<div id="bigvid">
<div class="img">
<div id="header">
<div class="inner presentation" style="z-index: 999; height: 100%">
<header>
<h1 style="
font-size: 100px;
line-height: 65px;
letter-spacing: 12px;
font-weight: 900;
margin: 26px 0;
color: #f5f4ed;
">
hibidabibi
</h1>
<hr>
<span class="byline" style="
font-size: 48px;
line-height: 65px;
letter-spacing: 12px;
font-weight: 900;
margin: 26px 0;
color: #f5f4ed;
">
Coming Soon
</span>
</header>
<footer>
<ul class="icons">
<li><a href="#" class="icon icon-twitter"><span>Twitter</span></a></li>
<li><a href="#" class="icon icon-youtube"><span>Facebook</span></a></li>
<li><a href="#" class="icon icon-instagram"><span>Google+</span></a></li>
</ul>
</footer>
</div>
</div>
</div>
</div>
This is my CSS:
#bigvid {
position: absolute;
background-color: #000;
height: 100%;
width: 100%;
z-index: 100;
background-image: url('../images/screenshot.jpg');
}
Visit for more information.