Loading...

Making Embedded YouTube Videos Responsive - Responsive Web Design

20,550 views

Loading...

Loading...

Transcript

The interactive transcript could not be loaded.

Loading...

Loading...

Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Aug 8, 2012

Want to make sure that your embedded YouTube videos look good on a mobile device? Looking to make your embedded YouTube video responsive?

This pure CSS solution allows you to use the embed code straight from a YouTube video's share option and make it responsive by simply adding an extra div container around the video. Most importantly, this responsive technique will preserve your embedded video's aspect ratio.

By using responsive website techniques, your pages will look good on a variety of screen sizes, including mobile devices. A responsive approach is an ideal way to create a single code base for both desktop, tablet and mobile experiences.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Use the following responsive CSS code on your embedded YouTube video responsive:

.video-container { position: relative; /* keeps the aspect ratio */ padding-bottom: 56.25%; /* fine tunes the video positioning */ overflow: hidden;
}

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Additional Resources:

"Creating Intrinsic Ratios for Video" @AListApart
http://www.alistapart.com/articles/cr...

"Responsive YouTube Videos with CSS" @Avex
http://avexdesigns.com/responsive-you...

"Using Relative and Absolute Positioning - CSS Basics" @YouTube http://youtu.be/46SwU07oFHE

  • Category

  • License

    • Standard YouTube License

Loading...

to add this to Watch Later

Add to

Loading playlists...