{"id":304927,"date":"2020-03-11T07:10:16","date_gmt":"2020-03-11T14:10:16","guid":{"rendered":"https:\/\/css-tricks.com\/?p=304927"},"modified":"2020-03-11T07:10:18","modified_gmt":"2020-03-11T14:10:18","slug":"fluid-width-video","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/fluid-width-video\/","title":{"rendered":"Fluid Width Video"},"content":{"rendered":"\n<p>IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting the video and presenting it via the HTML5 <code>&lt;video><\/code> tag. You might be using\u00a0YouTube,\u00a0Vimeo, or some other video provider\u00a0that provides <code>&lt;iframe><\/code> code to display videos. Let&#8217;s cover how to make them all fluid width while maintaining an appropriate height based on their aspect ratio.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>In each of these video-embedding scenarios, it is very common for a static <code>width<\/code> and <code>height<\/code> to be declared.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;video width=\"400\" height=\"300\" controls ... >&lt;\/video>\n\n&lt;iframe width=\"400\" height=\"300\" ... >&lt;\/iframe>\n\n&lt;!-- maybe even super old school -->\n&lt;object width=\"400\" height=\"300\" ... \/>\n&lt;embed width=\"400\" height=\"300\" ... \/><\/code><\/pre>\n\n\n\n<p>Guess what? Declaring static widths isn&#8217;t a good idea in fluid width environments. What if the parent container for that video shrinks narrower than the declared <code>400px<\/code>? It will bust out and probably look ridiculous and embarrassing.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/NetMag\/FluidWidthVideo\/images\/breakout.png?ssl=1\" alt=\"breakout\" data-recalc-dims=\"1\"\/><figcaption>Simple and contrived, but still ridiculous and embarassing.<\/figcaption><\/figure>\n\n\n\n<p>So can&#8217;t we just do this?<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;video width=\"100%\" ... >&lt;\/video><\/code><\/pre>\n\n\n\n<p>Well, yep, you can! If you are using standard HTML5 video, that will make the video fit the width of the container. It&#8217;s important that you remove the <code>height<\/code> declaration when you do this so that the aspect ratio of the video is maintained as it grows and shrinks, lest you get awkward &#8220;bars&#8221; to fill the empty space (unlike images, the actual video maintains it&#8217;s aspect ratio regardless of the size of the element). <\/p>\n\n\n\n<p>You can get there via CSS (and not worry about what&#8217;s declared in the HTML) like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">video {\n  \/* override other styles to make responsive *\/\n  width: 100%    !important;\n  height: auto   !important;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJVQPqe\" src=\"\/\/codepen.io\/anon\/embed\/OJVQPqe?height=650&amp;theme-id=1&amp;slug-hash=OJVQPqe&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJVQPqe\" title=\"CodePen Embed OJVQPqe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"ltiframegt-video-youtube-vimeo-etc\"><code>&lt;iframe&gt;<\/code> Video (YouTube, Vimeo, etc.)<\/h3>\n\n\n<p>Our little trick from above isn&#8217;t going to help us when dealing with video that is delivered via <code>&lt;iframe&gt;<\/code>. Forcing the width to 100% is effective, but when we set <code>height: auto<\/code>, we end up with a static height of 150px<sup><a href=\"#fn:1\">1<\/a><\/sup>, which is far too squat for most video and makes for more R&amp;E (Ridiculous and Embarrassing).<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaNYNLN\" src=\"\/\/codepen.io\/anon\/embed\/BaNYNLN?height=390&amp;theme-id=1&amp;slug-hash=BaNYNLN&amp;default-tab=result\" height=\"390\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaNYNLN\" title=\"CodePen Embed BaNYNLN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Fortunately, there are a couple of possible solutions here. One of them was pioneered by Thierry Koblentz and presented on A List Apart in 2009:&nbsp;<a href=\"http:\/\/www.alistapart.com\/articles\/creating-intrinsic-ratios-for-video\/\" rel=\"noopener\">Creating Intrinsic Ratios for Video<\/a>. With this technique, you wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. That gives us fluid width with a reasonable height we can count on.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"videoWrapper\">\n  &lt;!-- Copy &amp; Pasted from YouTube -->\n  &lt;iframe width=\"560\" height=\"349\" src=\"http:\/\/www.youtube.com\/embed\/n_dZNLr2cME?rel=0&amp;hd=1\" frameborder=\"0\" allowfullscreen>&lt;\/iframe>\n&lt;\/div><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.videoWrapper {\n  position: relative;\n  padding-bottom: 56.25%; \/* 16:9 *\/\n  height: 0;\n}\n.videoWrapper iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abOqOBK\" src=\"\/\/codepen.io\/anon\/embed\/abOqOBK?height=460&amp;theme-id=1&amp;slug-hash=abOqOBK&amp;default-tab=result\" height=\"460\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abOqOBK\" title=\"CodePen Embed abOqOBK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>There is a clever adaptation of this that allows you to adjust the aspect ratio right from the HTML, like:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"videoWrapper\" style=\"--aspect-ratio: 3 \/ 4;\">\n  &lt;iframe ...><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.videoWrapper {\n  ...\n  \/* falls back to 16\/9, but otherwise uses ratio from HTML *\/\n  padding-bottom: calc(var(--aspect-ratio, .5625) * 100%); \n}<\/code><\/pre>\n\n\n\n<p>Some old school video embedding uses <code>&lt;object&gt;<\/code> and <code>&lt;embed&gt;<\/code> tags, so if you&#8217;re trying to be comprehensive, update that wrapper selector to:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.videoWrapper iframe,\n.videoWrapper embed,\n.videoWrapper object { }<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"but-but-aspect-ratios-legacy-content-nontech-users-etc\">But, but&#8230; aspect ratios, legacy content, non-tech users, etc.<\/h3>\n\n\n<p>The above technique is awesome, but it has several possible limitations:<\/p>\n\n\n\n<ol><li>It requires a wrapper element, so just straight up copy-and-pasting code from YouTube is out. Users will need to be a bit savvier.<\/li><li>If you have legacy content and are redesigning to be fluid, all old videos need HTML adjustments.<\/li><li>All videos need to be the same aspect ratio. Otherwise, they&#8217;ll be forced into a different aspect ratio and you&#8217;ll get the &#8220;bars&#8221;. Or, you&#8217;ll need a toolbox of class names you can apply to adjust it which is an additional complication.<\/li><\/ol>\n\n\n\n<p>If either of these limitations applies to you, you might consider a JavaScript solution. <\/p>\n\n\n\n<p>Imagine this: when the page loads all videos are looked at and their aspect ratio is saved. Once right away, and whenever the window is resized, all the videos are resized to fill the available width and maintain their aspect ratio. Using the&nbsp;<a href=\"https:\/\/jquery.com\/\" rel=\"noopener\">jQuery<\/a>&nbsp;JavaScript Library, that looks like this:<\/p>\n\n\n\n<pre rel=\"jQuery\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ Find all YouTube videos\n\/\/ Expand that selector for Vimeo and whatever else\nvar $allVideos = $(\"iframe[src^='\/\/www.youtube.com']\"),\n\n  \/\/ The element that is fluid width\n  $fluidEl = $(\"body\");\n\n\/\/ Figure out and save aspect ratio for each video\n$allVideos.each(function() {\n\n  $(this)\n    .data('aspectRatio', this.height \/ this.width)\n\n    \/\/ and remove the hard coded width\/height\n    .removeAttr('height')\n    .removeAttr('width');\n\n});\n\n\/\/ When the window is resized\n$(window).resize(function() {\n\n  var newWidth = $fluidEl.width();\n\n  \/\/ Resize all videos according to their own aspect ratio\n  $allVideos.each(function() {\n\n    var $el = $(this);\n    $el\n      .width(newWidth)\n      .height(newWidth * $el.data('aspectRatio'));\n\n  });\n\n\/\/ Kick off one resize to fix all videos on page load\n}).resize();<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"thats-sorta-what-became-fitvidsjs\">That&#8217;s sorta what became FitVids.js<\/h3>\n\n\n<p>Except rather than deal with all that resizing business, <a href=\"https:\/\/github.com\/davatron5000\/FitVids.js\" rel=\"noopener\">FitVids.js<\/a> loops over all the videos and adds the aspect-ratio enabling HTML wrapper and CSS necessary. That&#8217;s <em>way more efficient<\/em> than needing to bind to a window resize handler! <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYVQVzq\" src=\"\/\/codepen.io\/anon\/embed\/LYVQVzq?height=450&amp;theme-id=1&amp;slug-hash=LYVQVzq&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYVQVzq\" title=\"CodePen Embed LYVQVzq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"plain-javascript-instead\">Plain JavaScript instead<\/h3>\n\n\n<p>jQuery is rather out of favor these days. Fortunately, Dave has a Vanilla version (that is BYO CSS):<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzXeXjK\" src=\"\/\/codepen.io\/anon\/embed\/YzXeXjK?height=550&amp;theme-id=1&amp;slug-hash=YzXeXjK&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzXeXjK\" title=\"CodePen Embed YzXeXjK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group footnotes\" id=\"fn:1\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<ol><li>Literally all browsers will render iframe, canvas, embed, and object tags as 300px \u00d7 150px if not otherwise declared. Even if this isn&#8217;t present in the UA stylesheet.<\/li><\/ol>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting the video and presenting it via the HTML5 &lt;video> tag. You might be using\u00a0YouTube,\u00a0Vimeo, or [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":304980,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1268,426,672],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/fluid-width-video.png?fit=1464%2C902&ssl=1","jetpack-related-posts":[{"id":313543,"url":"https:\/\/css-tricks.com\/fluid-images-in-a-variable-proportion-layout\/","url_meta":{"origin":304927,"position":0},"title":"Fluid Images in a Variable Proportion Layout","date":"July 3, 2020","format":false,"excerpt":"Creating fluid images when they stand alone in a layout is easy enough nowadays. However, with more sophisticated interfaces we often have to place images inside responsive elements, like this card: For now, let's say this image is not semantic content, but only decoration. That's a good use for background-image.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/strawberry-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":18311,"url":"https:\/\/css-tricks.com\/rundown-of-handling-flexible-media\/","url_meta":{"origin":304927,"position":1},"title":"Rundown of Handling Flexible Media","date":"September 17, 2012","format":false,"excerpt":"When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an that holds a blog post might be 320px wide on a small screen device and 690px wide on some large screen. Text can\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":334668,"url":"https:\/\/css-tricks.com\/barebones-css-for-fluid-images\/","url_meta":{"origin":304927,"position":2},"title":"Barebones CSS for Fluid Images","date":"February 18, 2021","format":false,"excerpt":"Zach takes a look at some fundamental HTML+CSS usage for fluid, responsive images. Most of it, I'd say, is what you'd expect, but things get weird when srcset gets involved. I poked my way through, and in addition to the weird thing Zach noted, wanted to add one more thing.\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/zach-fluid-images-ex.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":7066,"url":"https:\/\/css-tricks.com\/fluid-width-youtube-videos\/","url_meta":{"origin":304927,"position":3},"title":"Fluid Width YouTube Videos","date":"June 8, 2011","format":false,"excerpt":"YouTube now gives you iframe code for embedding videos hosted there onto your own page. This article offers a jQuery JavaScript based solution for making them work in fluid width environments, which they inherently do not.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/09\/fluidwidthyoutube.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":14497,"url":"https:\/\/css-tricks.com\/making-sublimevideo-fluid-width\/","url_meta":{"origin":304927,"position":4},"title":"Making SublimeVideo Fluid Width","date":"October 11, 2011","format":false,"excerpt":"SublimeVideo is a nice HTML5 video polyfill service, but it hasn't allow for fluid width video. Until now.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":311235,"url":"https:\/\/css-tricks.com\/a-first-look-at-aspect-ratio\/","url_meta":{"origin":304927,"position":5},"title":"A First Look at `aspect-ratio`","date":"May 28, 2020","format":false,"excerpt":"Oh hey! A brand new property that affects how a box is sized! That's a big deal. There are lots of ways already to make an aspect-ratio sized box (and I'd say this custom properties based solution is the best), but none of them are particularly intuitive and certainly not\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/aspect-ratio.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304927"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=304927"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304927\/revisions"}],"predecessor-version":[{"id":304982,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304927\/revisions\/304982"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/304980"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=304927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=304927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=304927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}