Web Design News | How to Scale Embedded Media in Responsive Designs

Step 1

Enter your contact information.

Step 2

Enter your project information.

Step 3

Choose the PHP programmers you want to hire.

Compare Free PHP Quotes

How to Scale Embedded Media in Responsive Designs

Attention PHP Programmers - Add A Free Listing! Get more clients.

A responsive movie embed working on a Sony Ericsson (photo by Anders Andersen)

In order to make responsive designs successfully adapt to any screen size, you need to properly scale not just headlines and text elements, but images and other media. We’ve already covered a number of solutions for images, but what about other elements like video?

Scaling video when you can control the embed code is pretty easy, the same max-width tricks that work on images will work on video. The tricky problems with scaling video come when you start trying to embed movies from other websites.

YouTube and most other video hosting sites typically include a fixed width and height in pixels as part of the embed code. That’s fine for older designs, but it doesn’t scale in a responsive layout.

Swedish web developer Anders Andersen recently tackled the problem of responsive embeds and came up with a solution that works with both YouTube and Vimeo movies. Andersen’s solution is to wrap any embed code, whether it’s an actual embed tag or an iframe, with an extra div and then scale that div. Naturally you’ll need to strip any fixed dimensions out of the YouTube or other embed code for this to work.

For the full details and the CSS that makes it work, be sure to read Andersen’s whole post.

The core of Andersen’s method lies in the CSS, which uses this handy trick to preserve the intrinsic ratio of the video even as its container element scales down.

Andersen has tested this technique with YouTube, Vimeo and SlideShare embeds, though it may work with others as well.

Between stripping out any video dimensions and adding a wrapper div, Andersen’s responsive embed trick is a little bit of work. It’s probably not practical for a site with a lot of video, or a site where non-technical users will be posting video. However, if you’ve got a simple site that’s 99 percent responsive, but you’ve been looking for a way to handle video, this fits the bill.

Be sure to check out Andersen’s follow-up post where he does some device testing. The results are generally encouraging, with most modern phones handling the code just fine. The only real problem device seems to be the new Nokia Lumia 800 (running Windows Phone 7) which fails to play the YouTube embeds.

Source http://www.webmonkey.com/?p=53049
Tue, 06 Dec 2011 18:06:51 GMT
Tags: Mobile, responsive design, Visual Design,

Attention PHP Programmers - Add A Free Listing! Get more clients.

Mobile

Firefox Storms the Small Screen With New Firefox 4 for Android

Mozilla has released Firefox Mobile for Android and Maemo, bringing the company’s mobile browser up to par with the new desktop version of Firefox 4. Mozilla claims Mobile Firefox 4 is up to three times faster than Android’s default web browse

Adobe Takes On Mobile World With Creative Suite 5.5

Adobe has updated several of its Creative Suite applications to version 5.5, adding some new tools designed to target tablets and mobile devices. The primary interest for web developers is the improved HTML5 and CSS3 support in Dreamweaver 5.5, Adobe̵

Tips, Tricks and Best Practices for Responsive Design

Unless you’ve been too busy wake boarding the Alps to notice, there’s a movement afoot amongst web designers — Responsive Design. Ethan Marcotte coined the term responsive design to describe the process of using liquid layouts and media

responsive design

Take Responsive Design Beyond the (Fluid) Grid

We’ve given you a look at some best practices for responsive design, but beyond the nuts and bolts of @media queries and flexible grids, there is something more subtle, and more important, at work behind the moniker responsive design. Good design ha

Screenfly: The Easy Way to Test Responsive Web Designs

If you’ve embraced responsive web design — and we sincerely hope you have — you know that fluid layouts, helpful as they are, can be tricky. Combine them with @media queries to re-size and re-position elements on the fly and you’ll

Visual Design

Decoding Web Fonts With ‘What Font’

Designers have been bemoaning the state of typography in the browser since the dawn of the web. However, CSS 3 and the @font-face rule go a long way toward improving your font options. Throw in tools like lettering.js and easy-to-use font services like Ty

How to Have Your @Media Queries and Eat IE Too

CSS 3 media queries make building a mobile version of your site incredibly simple — just add a few lines of CSS to handle the smaller screen size of tablets and phones. The only problem is that not every web browser understands @media queries, and i

CSS 3 Brings Iconic Mad Men Titles to Life on the Web

Web developer Anthony Calzadilla has recreated the opening title sequence of AMC’s Mad Men using only CSS 3 animations and some carefully crafted images. The result is an impressive showcase of what you can do with the animation powers available in

Members:

Las Vegas

NetDynamic - PHP/MySQL - Experienced Dev

PHP/MySQL Web Developer 15+ years experience. We are a team of developers and designers. Address: 3513 E Russell Road, Las Vegas, NV Call us: 877-704-0005 or 702-509-5050

Las Vegas, Nevada US

New Port Richey

CQuinnDesign

We provide affordable php website design & SEO services to our clients. Our HTML is search engine friendly and builds a solid foundation for your SEO & marketing campaign. WE provide free estimates.

New Port Richey, Florida US

Marina Del Rey

Perlman Creative Group

Perlman Creative Group is a Los Angeles based, full service graphic design firm specializing in marketing communication, brand development, logos, packaging, corporate identity and website design.

Marina Del Rey, California US

Quilcene