2

I built a new client splash-page using background video, and aside from responsive tweaks for iPhone and killing background video on iOS, it didn't occur to me to test on retina.

Today, as I view on the MBP Retina, it looks like the video is covering the "correct number of pixels" on the height, but just unsure how to force the video to cover "2x".

Have you heard of this spec?

Could it be as easy as setting the min-height/min-width of the video background to "200%" for retina?

Markup Used

<div id="bgVideo" class="background">
  <video id="video_background" preload="auto" autoplay loop muted volume="0">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.mp4" type="video/mp4">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.webm" type="video/webm">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.ogv" type="video/ogg">
  </video>
</div>
<span style="opacity: .9"<div class="video_pattern" ></div></span>

CSS Chunk

#video_background { 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden;
}

Screenshots and Links

Link to Live Site

Retina Resolution Display Screenshot - (MBP 13" Retina)

Alan
  • 29
  • 2
  • 7
  • FYI: "setting the min-height/min-width of the video background to 200% for retina" didn't work. It basically just applied a '200% zoom' to the video content. —scripting sounds like the answer. – Alan Sep 08 '14 at 15:29

1 Answers1

0

A trick you can use for retina is to instantiate the element in JavaScript, setting its width and height to be double the 'regular' body size.

You could instantiate the width and height variables like this:

var videoWidth = (body.innerWidth() * 2);
var videoHeight = (body.innerHeight() * 2);

Then, when you create the video background object in your JavaScript file, set your width and height parameters to be half of the videoWidth and videoHeight. It could look something like this:

videoBackground.setAttribute('width', videoWidth / 2);
videoBackground.setAttribute('height', videoHeight/ 2);

The code above will show the video background normally on desktop and non-retina devices. Finally, you can use the following code to scale it up when a retina device is detected:

if(window.devicePixelRatio == 2) {
    videoBackground.setAttribute('width', videoWidth);
    videoBackground.setAttribute('height', videoHeight);
}

The advantage of this method is that it provides a fallback for non-retina displays. The important aspect of this solution would be that you instantiate your video object inside JavaScript, not in the HTML.

Defiant
  • 156
  • 1
  • 12
  • Thank you. This sounds like it would work, but I'll have to figure-out how to implement it. (says the Designer to the Developer) – Alan Sep 08 '14 at 15:21
  • You have to create the element in JavaScript and bind it to a div which you declare in your HTML. Put all of this instantiation inside a function in your JS file called 'prepareVideo()'. Call the function in your HTML: `your code here` – Defiant Sep 08 '14 at 15:41