{"componentChunkName":"component---src-templates-post-js","path":"/blog/2020/10/10/tailwind-css-fluid-width-video/","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://sung.codes"}},"mdx":{"id":"fbcf9e81-ff17-5dad-a9e8-449ca472145c","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Tailwind CSS - Fluid Width Video\",\n  \"date\": \"2020-10-10\",\n  \"published\": true,\n  \"tags\": \"tailwind, tailwindcss, css, youtube, cheatsheet\",\n  \"author\": \"Sung M. Kim\",\n  \"banner\": \"./images/featured-image.jpg\",\n  \"bannerCredit\": \"Image by [Rudy and Peter Skitterians](https://pixabay.com/users/skitterphoto-324082/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1017451) from [Pixabay](https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1017451)\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Introduction\"), mdx(\"p\", null, \"Learned how to make YouTube videos from this CSS Tricks article, \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://css-tricks.com/fluid-width-video/\"\n  }), \"Fluid Width Video\"), \".\"), mdx(\"p\", null, \"The following code snippet is a Tailwind CSS version of \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://css-tricks.com/fluid-width-video/#iframe-video-youtube-vimeo-etc\"\n  }), \"<\", \"iframe\", \">\", \" Video (YouTube, Vimeo, etc.)\"), \" section.\", \"_\"), mdx(\"h2\", null, \"Fluid Width iFrame Video\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Add a wrapper element with following classes\"), mdx(\"ol\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/position#relative\"\n  }), \"relative\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"A Tailwind CSS \", mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"padding\"), \" extension\", mdx(\"div\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }), mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"module\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"exports \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n  purge\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"...\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"]\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  theme\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n    extend\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \" padding\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"fluid-video\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"56.25%\\\"\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  variants\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  plugins\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"]\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"))))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Remove the wrapper height with \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/height#app\"\n  }), \"h-0\"), \".\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Position \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"iframe\"), \" with an \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/position#absolute\"\n  }), \"absolute\"), \" positioning on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/top-right-bottom-left#app\"\n  }), \"top left\"), \" (\", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"top-0\"), \", \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"left-0\"), \"), with 100% \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/width#app\"\n  }), \"width\"), \" and \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/height#app\"\n  }), \"height\"), \" (\", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"w-full\"), \", \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"h-full\"), \").\"))), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"jsx\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-jsx\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"div\"), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"id\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"responsiveVideoWrapper\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \" \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"className\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"relative h-0 pb-fluid-video\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n  \"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"iframe\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"className\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"absolute top-0 left-0 w-full h-full\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"src\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"https://www.youtube.com/embed/zihoyz0u_cs\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"allow\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"allowFullScreen\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"iframe\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token plain-text\"\n  }), \"\\n\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"div\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\"))))), mdx(\"hr\", null), mdx(\"p\", null, \"Image by \", mdx(\"a\", {\n    href: \"https://pixabay.com/users/skitterphoto-324082/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1017451\"\n  }, \"Rudy and Peter Skitterians\"), \" from \", mdx(\"a\", {\n    href: \"https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1017451\"\n  }, \"Pixabay\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Tailwind CSS - Fluid Width Video","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='270'%20viewBox='0%200%20400%20270'%20preserveAspectRatio='none'%3e%3cpath%20d='M201%2014a640%20640%200%2000-6%2025l4%202c0%202%200%202-2%201l-2-1a484%20484%200%2001-16%2097c-14%200-40-3-41-5-2-3-1-5%203-6%205-3%202-4-8-4-9%201-15%203-12%204%201%200%202%201%202%203l1%203a156%20156%200%200051%207l-3%2017-4%201-2%202c1%203-10%205-14%203-2-2-3-2-3-1l-2%201c-3-1-5%200-5%202s0%202-1%201h-5c-4%203-7%203-8%200l-3-2c-2%200-2%201-1%205%200%207%201%209%202%2012%200%203%205%2012%206%2014l4%205c5%2011%2023%2029%2035%2035a76%2076%200%200047%201l8-4a162%20162%200%200033-36c3-3%205-7%205-17l-1-3c-3%201-9%204-9%206l-1%201-2%201-1%203-2%201c0-2-1-2-5-1-3%201-3-1%200-5v-3h-3c-1%201-1%200-1-1l-3-5c-4-5-7-5-8-1l-3%202c-2%200-2%200%200-2s1-2-3-1c-2%201-2%201-1%202%201%202-4%207-5%206l-3%205c1%201-3%203-5%202l-1-1v-2l1-1c0-1-7%200-8%202s-1%203%201%206l2%204h-3l-5-2-2-1v-2c1-3%200-6-1-7l-1-2-1-3v-1c3-1%202-6%200-8s-2-3-2-7a204%20204%200%20003-19l1-2%2023-1c23-1%2027-1%2022-3l-2-1h2c4%200%204-2%200-3l-5%201c-1%202-2%202-7%201l-16-1c-10%201-11%201-13%203-3%204-3%200-1-15%204-24%2011-55%2017-72%202-7%203-8%206-9l3-1-4-1c-3%200-4%200-2-1l3-4%2012-33h-25l-4%2014m52%20109v4c2%201%202%201%200%203l-2%202h-6l-2%201%203%201%202%201c1%201%200%201-3%201l-5%201h3l12-1c14-2%2022-4%2023-7%200-2%200-2-3-2h-1c2%200%201-2-1-3-1-1-18-2-20-1m-60%20125h-6v22h6v-7l1-8c1-1%201-1-1-1l1-1%201-1c-5%200%200-2%205-2l5-1c0-1-4-2-12-1'%20fill='%23FFC600'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.4814814814814814,"src":"/static/0b4872dde9135ab2972fd8027e3c91c3/f422e/featured-image.jpg","srcSet":"/static/0b4872dde9135ab2972fd8027e3c91c3/e75b5/featured-image.jpg 160w,\n/static/0b4872dde9135ab2972fd8027e3c91c3/c01e2/featured-image.jpg 320w,\n/static/0b4872dde9135ab2972fd8027e3c91c3/f422e/featured-image.jpg 640w,\n/static/0b4872dde9135ab2972fd8027e3c91c3/a6352/featured-image.jpg 960w,\n/static/0b4872dde9135ab2972fd8027e3c91c3/ec6c5/featured-image.jpg 1280w","srcWebp":"/static/0b4872dde9135ab2972fd8027e3c91c3/991d2/featured-image.webp","srcSetWebp":"/static/0b4872dde9135ab2972fd8027e3c91c3/578e8/featured-image.webp 160w,\n/static/0b4872dde9135ab2972fd8027e3c91c3/8dbf3/featured-image.webp 320w,\n/static/0b4872dde9135ab2972fd8027e3c91c3/991d2/featured-image.webp 640w,\n/static/0b4872dde9135ab2972fd8027e3c91c3/1fb14/featured-image.webp 960w,\n/static/0b4872dde9135ab2972fd8027e3c91c3/135cd/featured-image.webp 1280w","sizes":"(max-width: 640px) 100vw, 640px"}}}},"excerpt":"Introduction Learned how to make YouTube videos from this CSS Tricks article,  Fluid Width Video . The following code snippet is a Tailwind…","fields":{"year":"2020","slug":"/blog/2020/10/10/tailwind-css-fluid-width-video/"}}},"pageContext":{"id":"fbcf9e81-ff17-5dad-a9e8-449ca472145c"}},"staticQueryHashes":["398935099"]}