CODEWITHSUNDEEP
javascriptvideo
user2247584
user2247584

Reputation: 11

video effect using javascript

Can any one please tell me how to get the video effect shown on this page? It has 100% width, is responsive and uses Javascript.

If you have any code samples that would be great.

Upvotes: 1

Views: 341

Answers (2)

danro
danro

Reputation: 51

BKWLD dev here. We're using an outer div set to overflow: hidden and then scaling + positioning the video tag using JavaScript, based on a 16:9 aspect ratio.

Here's a simplified example of what's happening on each window resize event:
(https://gist.github.com/danro/5408291)

// Depends on jQuery
// Assumes outerDiv and videoTag are jQuery objects

var width = outerDiv.width();
var height = outerDiv.height();
var aspectW = 16;
var aspectH = 9;
var scaleX = width / aspectW;
var scaleY = height / aspectH;
var scale = Math.max(scaleX, scaleY);
var w = Math.ceil(aspectW * scale);
var h = Math.ceil(aspectH * scale);
var x = 0;
var y = 0;
if (w > width) x = -(w-width)*0.5;
if (h > height) y = -(h-height)*0.5;

videoTag.css({
  width: w,
  height: h,
  top: y,
  left: x
});

Upvotes: 0

hexacyanide
hexacyanide

Reputation: 91649

The site is using the HTML5 video tag. Here's the source, rendered by Google Chrome:

<video loop="loop" poster="/video/features/main.jpg" style="width: 1263px; height: 711px; top: -186.5px; left: 0px;">
  <source src="/video/features/main.webm" type="video/webm">
  <source src="/video/features/main.mp4" type="video/mp4">
</video>

The tag, evidently only available in HTML5 compatible browsers, can play video files. That's what it's doing in this case.

The first source is the primary video source, and the MP4 is the fallback in case the first video format isn't supported. The loop property allows you to set a loop to the playing video, and the poster is an image to show until the user plays or seeks.

Take a look at the MDN page.

Upvotes: 1

Related Questions