{"id":259,"date":"2013-02-06T00:00:00","date_gmt":"2013-02-06T05:00:00","guid":{"rendered":"http:\/\/sproutvideo.wpengine.com\/?p=259"},"modified":"2022-01-27T14:04:59","modified_gmt":"2022-01-27T19:04:59","slug":"how-to-make-your-videos-responsive","status":"publish","type":"post","link":"https:\/\/sproutvideo.com\/blog\/how-to-make-your-videos-responsive.html","title":{"rendered":"How To Make Your Videos Responsive"},"content":{"rendered":"

Update: SproutVideo supports responsive video embed codes<\/a> out-of-the-box. Now, you can ensure your videos will resize automatically without touching a line of code on the page.<\/em><\/p>\n

If you\u2019re in the process of building a responsive website or looking to add video to an already responsive website, here is a quick guide on how to make sure your videos resize as seamlessly as the rest of your site.<\/p>\n

<\/p>\n

The Problem<\/h3>\n

Why do images resize fluidly and maintain their aspect ratio in responsive layouts, while videos using iframe or object embed codes do not? Since images have a defined width and height, browsers are able to calculate, and maintain, their aspect ratio when resizing them.<\/p>\n

Iframe and object elements, on the other hand, have no native width and height that a browser can use to calculate an aspect ratio. This can lead to some frustrating behavior when embedding a video in a responsive layout.<\/p>\n

The Solution: Intrinsic Aspect Ratios<\/h3>\n

The solution to this problem is to tell the browser what the proper aspect ratio should be for the video in the iframe or object element. This way, the browser will be able to maintain that aspect ratio when resizing the video in a responsive layout.<\/p>\n

How it works<\/h4>\n

To set up this \u201cintrinsic ratio<\/a>\u201d you simply need to create a box with the proper aspect ratio, place the embedded video in that box, and have it stretch to fit that box.<\/p>\n

The padding-bottom<\/code> css property is what allows us to define the aspect ratio for the box in which the video will be placed. By setting the padding-bottom<\/code> property to a percentage of the width<\/strong> of the containing element, we are able to create an intrinsic aspect ratio for that box.<\/p>\n

Once the aspect ratio is set up, we just need to set our video embed code to take up the full width and height of the box we just created.<\/p>\n

An example<\/h4>\n
\n
<style><\/span>\r\n\t.videoWrapper<\/span> {<\/span>\r\n\t    position<\/span>:<\/span> relative<\/span>;<\/span>\r\n\t    padding-bottom<\/span>:<\/span> 56<\/span>.<\/span>25<\/span>%<\/span>;<\/span>\r\n\t    height<\/span>:<\/span> 0<\/span>;<\/span>\r\n\t}<\/span>\r\n\r\n\t.videoWrapper<\/span> iframe<\/span>,<\/span>\r\n\t.videoWrapper<\/span> embed<\/span>,<\/span>\r\n\t.videoWrapper<\/span> object<\/span> {<\/span>\r\n\t    position<\/span>:<\/span> absolute<\/span>;<\/span>\r\n\t    width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\r\n\t    height<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\r\n\t    left<\/span>:<\/span> 0<\/span>;<\/span>\r\n\t    top<\/span>:<\/span> 0<\/span>;<\/span>\r\n\t}<\/span>\r\n<\/style><\/span>\r\n<div<\/span> class=<\/span>\"videoWrapper\"<\/span>><\/span>\r\n\t<iframe<\/span> class=<\/span>'sproutvideo-player'<\/span> type=<\/span>'text\/html'<\/span> src=<\/span>'http:\/\/videos.sproutvideo.com\/embed\/e898d2b5111be3c860\/546cd1548010aaeb?type=sd'<\/span> width=<\/span>'630'<\/span> height=<\/span>'354'<\/span> frameborder=<\/span>'0'<\/span>><\/iframe><\/span>\r\n<\/div><\/span>\r\n<\/code><\/pre>\n<\/div>\n
Explanation<\/h4>\n
In this example, the .videoWrapper<\/code> sets the padding-bottom<\/code> property to 56.25%<\/code>. This sets up a 16:9 aspect ratio for that div (9\/16 = 56.25%). Then, the SproutVideo iframe embed code is placed within this box and set up to take 100% of it\u2019s width and 100% of it\u2019s height.<\/p>\n
Tips<\/h3>\n
See it in action<\/a> (Try resizing the browser window!)<\/p>\n