Web design isn’t what it used to be ― and video isn’t, either. Designers need to be able to build attractive, interactive sites that respond to users’ needs, and more and more frequently, users need video on every site they visit. Unfortunately, not all videos or video players are perfectly suited to responsive design, which means designers need to understand how to integrate video without losing the high-quality look and feel of their webpages. This guide will help any designer learn the ins and outs of building responsive video as well as a few additional tricks for making video stand out online.

How to Make Any Video Responsive

The wiz-kids at YouTube and the programmers for all other popular online video players know well-enough that mobile browsing is the way of the future, but most code remains lamentably archaic. Take this typical iframe from YouTube’s embed feature:

Unfortunately, in regular HTML, this markup forces the video to remain fixed in size, no matter what device it appears on. Fortunately, the fix requires only minor tinkering in CSS.

First, wrap the embed code with a simple HTML element:

Then, add a bit more code to the CSS file:
.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%;

}

For those unexperienced with HTML coding, these phrases and values allow the video to display differently in different environments. Initially, a video-container class surrounds the iframe with positioning and padding to place the video precisely, depending on the webpage’s design.

A few of the fixes ― particularly padding-bottom, height: 0 and overflow: hidden ―come from Internet Explorer, which helps the code work in all browsers. The settings of top: 0 and left: 0 should be altered to suit individual designs, as these force the video into the top-left of the container.

It is the designer’s duty to make the entirety of a webpage’s content accessible to users, which means more and more designs must find responsive solutions to web development problems. However, the complexity of responsive design is no excuse to halt advancement in how videos are used online.

How to Go Further With Video

Boring is unacceptable in today’s web design, and today, boring means static. Even the clear, sweeping browser-sized background images so popular just a year ago are now dull, which means designers must be able to integrate interesting, immersive video elements into their designs. Thankfully, HTML5 makes this exceedingly easy, as the simple responsive code fix above demonstrates.

One of the most eye-catching methods for utilizing video in an extraordinary way is by replacing those enormous, stagnant background pictures with videos of the same size. Background videos are effective at establishing a mood for the site (or brand), demonstrating products and services, or telling stories more dynamically than text or stationary images ever could.

Of course, to craft a clean and artful design, designers need access to high-quality videos. Designers or their clients should look to local businesses, like this video production company in Washington, D.C., for help in planning, recording, and editing pristine video.

Inspiration for engaging video is easy to find around the web. Here is a handful of some of the top-rated designs employing that huge background image designers, clients, and web users love:

• Y.CO Yachts. A few short moving scenes related to the yachting industry effectively sells the lifestyle to potential yachters.
• Arcade Fire. A combination music video and interactive webpage, this site is quirky and engaging just like the indie band it represents.
• Coulee Creative. A high-energy background that doesn’t detract from the business’s marketing message.
• Ditto Residential. Going beyond pictures of rooms and square-footage numbers, the site for this property development company shows what life is like in their homes.
• HtO Surfshop. The videos on this site put visitors in the ocean before they even buy a board ― which makes the desire to surf even stronger.
• Bill Byron Wines. The shifting clouds and muted tones of the vineyard make this site somber and seductive ― much like a glass of red wine.