{"id":747,"date":"2014-01-23T22:25:27","date_gmt":"2014-01-24T04:25:27","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=747"},"modified":"2014-01-23T22:25:27","modified_gmt":"2014-01-24T04:25:27","slug":"embedding-video-responsive-site","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/embedding-video-responsive-site\/","title":{"rendered":"Embedding Video in a Responsive Site"},"content":{"rendered":"<p>We live in the future, and one of the benefits of our brave new world is the thousands of cat videos that are just a click away. Let&#8217;s say you&#8217;ve just found the <em>perfect<\/em> felicitous feline video to share with all your friends. You post it to your fancy responsive website quick as a flash (because it&#8217;s the future and we can do that), but whoops: the video doesn&#8217;t fit! It&#8217;s too wide, too narrow, or just awkwardly sized.<\/p>\n<p>Let&#8217;s fix that.<\/p>\n<p>First off, we&#8217;ll need some sort of a wrapper container for our video. We&#8217;ll paste our embed code inside this wrapper. It&#8217;ll look something like this:<\/p>\n<pre lang=\"html5\">\n<div class=\"video\">\n  <!-- YouTube Embed Code: -->\n  <iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/9LUv3kbmNfg\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<\/pre>\n<p>This wrapper will become our responsive container, adjusting to the size of its parent and allowing us to resize the contents within it.<!--more--><\/p>\n<p>Our goal is to keep the same <em>aspect ratio<\/em> as the original video embed, while allowing the width and height of the video to change to fit its surroundings. Happily, ratios (aspect or otherwise) are just fancy fractions, fractions are just jumped-up percentages, and percentages are the bread and butter of CSS.<\/p>\n<p>The intuitive approach would be to set our .video container width to 100% and the height to whatever percentage we need to create our ratio. So if we&#8217;re embedding a 16:9 video (widescreen), that means we have 16px of width for every 9px of height. Or put percentagely, if our width is 100%, our height needs to be 9\/16 of 100%, or 56.25% of the width.<\/p>\n<p>Unfortunately for us, height percentages in CSS don&#8217;t work that way. When you set a percentage height in CSS, it&#8217;s considered to be a percentage of its <em>parent<\/em> container, not a percentage of the element&#8217;s width. So that height won&#8217;t work.<\/p>\n<p>Weird CSS to the Rescue: while height percentages are based on the parent container height, padding percentages are based on the element&#8217;s width! And while normally all that padding on our video container would just put padding around our video, if we use absolute positioning to pull the video out of the normal document flow, everything works out just fine.<\/p>\n<pre lang=\"css\">\n.video {\n  position: relative;\n  width: 100%;\n  height: 0;\n  padding-bottom: 56.25%;\n}\n.video iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n<\/pre>\n<p>In this example, I&#8217;m assuming the video embed is an iframe. As of this writing, YouTube, Vimeo, Vine (you may have heard of them) and many others are using iframe embeds, so this technique will work great for loads of sites.<\/p>\n<p>We&#8217;re setting relative position on the .video div so that anything absolutely positioned inside <a href=\"http:\/\/cssnewbie.com\/harnessing-positioning-1\/\" title=\"Harnessing CSS Positioning: Part 1\">considers .video to be the parent<\/a>. And then we just tell the iframe to take up all the space available in its parent&#8230; which is a box exactly as wide as its container and set to a 16:9 aspect ratio.<\/p>\n<p>It works something like this:<\/p>\n<div style=\"position:relative; width: 100%; height: 0; padding-bottom: 56.25%; margin-bottom: 20px\"><iframe loading=\"lazy\" width=\"420\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/sP4NMoJcFd4\" frameborder=\"0\" allowfullscreen style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\"><\/iframe><\/div>\n<p>Go ahead and resize your browser. The width and height of the video will adapt to the container. <\/p>\n<p>If you need to support other aspect ratios, just figure out the percentages involved and create classes for those. Vine uses a 1:1 ratio, so the padding-bottom would be 100%. A 4:3 &#8220;standard&#8221; resolution video would need a height of 75%, and so on.<\/p>\n<p>Go forth and embed!<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>You&#8217;ve just found the perfect cat video to share with all your friends. You post it to your fancy responsive website, but whoops: the video doesn&#8217;t fit! Let&#8217;s fix that. [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/embedding-video-responsive-site\/\" title=\"Click to read 'Embedding Video in a Responsive Site'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[192,194],"tags":[79,323,156,377],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/747"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=747"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/747\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}