HTML Background video aspect ratio

1 Views

So I’m trying to use a fullscreen background video with the Twenty Twelve theme in WordPress. When I’m behind a fullscreen monitor or on my laptop, everything works perfect.

However, as soon as I ditch my trusty 16/9 resolution & use a standard screen, the aspect ratio of the video messes the whole thing up (the background isn’t stretched across the page, but is centered with whitespace above and below the video), although I’ve tried all the tricks in the book – max-height, height: auto etc.

Read More

My HTML: 

<video autoplay loop poster="wp-content/themes/murastekylaselts/video.jpg" id="bgvid" muted="muted  ">
<source src="wp-content/themes/murastekylaselts/video/video.webm" type="video/webm">
<source src="wp-content/themes/murastekylaselts/video/video.mp4" type="video/mp4">
</video>

My CSS: 

video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(video.jpg) no-repeat;
    background-size: cover;
}

You can view the page live @ http://muff1n.eu/muraste

Thanks!

Post Views: 1

Related posts

1 comment

  1. Wrap it in a div with the video-container class described here: http://webdesignerwall.com/tutorials/css-elastic-videos.

    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="video-container">  // could also be <body class="video-container">
    <video autoplay loop poster="wp-content/themes/murastekylaselts/video.jpg" id="bgvid" muted="muted  ">
    <source src="wp-content/themes/murastekylaselts/video/video.webm" type="video/webm">
    <source src="wp-content/themes/murastekylaselts/video/video.mp4" type="video/mp4">
    </video>
</div>

Comments are closed.