[{"data":1,"prerenderedAt":703},["Reactive",2],{"content-query-O6ZVPjOE2o":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"body":10,"_type":698,"_id":699,"_source":700,"_file":701,"_extension":702},"/docs/utilities/css/embed","css",false,"","CSS Utility Classes - Embed - Inkline","Create responsive video embeds by keeping the aspect ratio based on the parent element width.",{"type":11,"children":12,"toc":692},"root",[13,20,27,34,68,251,257,262,372,477,582,687],{"type":14,"tag":15,"props":16,"children":19},"element","content-heading",{"subtitle":17,"title":18},"CSS Utility Classes","Embed",[],{"type":14,"tag":21,"props":22,"children":24},"h2",{"id":23},"create-responsive-video-embeds-by-keeping-the-aspect-ratio-based-on-the-parent-element-width",[25],{"type":26,"value":9},"text",{"type":14,"tag":28,"props":29,"children":31},"h3",{"id":30},"basic-example",[32],{"type":26,"value":33},"Basic Example",{"type":14,"tag":35,"props":36,"children":37},"p",{},[38,40,46,48,53,54,59,61,66],{"type":26,"value":39},"Embed styles are directly applied to ",{"type":14,"tag":41,"props":42,"children":43},"code-inline",{},[44],{"type":26,"value":45},"\u003Ciframe>",{"type":26,"value":47},", ",{"type":14,"tag":41,"props":49,"children":50},{},[51],{"type":26,"value":52},"\u003Cembed>",{"type":26,"value":47},{"type":14,"tag":41,"props":55,"children":56},{},[57],{"type":26,"value":58},"\u003Cvideo>",{"type":26,"value":60},", and ",{"type":14,"tag":41,"props":62,"children":63},{},[64],{"type":26,"value":65},"\u003Cobject>",{"type":26,"value":67}," elements.",{"type":14,"tag":69,"props":70,"children":71},"content-tabs",{},[72,81],{"type":14,"tag":73,"props":74,"children":75},"template",{"v-slot:preview":7},[76],{"type":14,"tag":77,"props":78,"children":80},"content-preview",{"src":79},"/stories/utilities/embed/basic",[],{"type":14,"tag":73,"props":82,"children":83},{"v-slot:vue":7},[84],{"type":14,"tag":85,"props":86,"children":91},"code",{"className":87,"code":89,"language":90,"meta":7},[88],"language-vue","\u003Ctemplate>\n    \u003Cdiv class=\"_embed:16:9!\">\n        \u003Ciframe src=\"https://www.youtube.com/embed/_oIDt3dRgro\" allowfullscreen />\n    \u003C/div>\n\u003C/template>\n\n","vue",[92],{"type":14,"tag":93,"props":94,"children":95},"pre",{},[96],{"type":14,"tag":85,"props":97,"children":98},{"__ignoreMap":7},[99,121,161,216,233],{"type":14,"tag":100,"props":101,"children":104},"span",{"class":102,"line":103},"line",1,[105,111,116],{"type":14,"tag":100,"props":106,"children":108},{"class":107},"ct-553616",[109],{"type":26,"value":110},"\u003C",{"type":14,"tag":100,"props":112,"children":114},{"class":113},"ct-914029",[115],{"type":26,"value":73},{"type":14,"tag":100,"props":117,"children":118},{"class":107},[119],{"type":26,"value":120},">\n",{"type":14,"tag":100,"props":122,"children":124},{"class":102,"line":123},2,[125,130,135,140,146,151,157],{"type":14,"tag":100,"props":126,"children":127},{"class":107},[128],{"type":26,"value":129},"    \u003C",{"type":14,"tag":100,"props":131,"children":132},{"class":113},[133],{"type":26,"value":134},"div",{"type":14,"tag":100,"props":136,"children":137},{"class":107},[138],{"type":26,"value":139}," ",{"type":14,"tag":100,"props":141,"children":143},{"class":142},"ct-762058",[144],{"type":26,"value":145},"class",{"type":14,"tag":100,"props":147,"children":148},{"class":107},[149],{"type":26,"value":150},"=",{"type":14,"tag":100,"props":152,"children":154},{"class":153},"ct-952708",[155],{"type":26,"value":156},"\"_embed:16:9!\"",{"type":14,"tag":100,"props":158,"children":159},{"class":107},[160],{"type":26,"value":120},{"type":14,"tag":100,"props":162,"children":164},{"class":102,"line":163},3,[165,170,175,179,184,188,193,197,202,206,212],{"type":14,"tag":100,"props":166,"children":167},{"class":107},[168],{"type":26,"value":169},"        \u003C",{"type":14,"tag":100,"props":171,"children":172},{"class":113},[173],{"type":26,"value":174},"iframe",{"type":14,"tag":100,"props":176,"children":177},{"class":107},[178],{"type":26,"value":139},{"type":14,"tag":100,"props":180,"children":181},{"class":142},[182],{"type":26,"value":183},"src",{"type":14,"tag":100,"props":185,"children":186},{"class":107},[187],{"type":26,"value":150},{"type":14,"tag":100,"props":189,"children":190},{"class":153},[191],{"type":26,"value":192},"\"https://www.youtube.com/embed/_oIDt3dRgro\"",{"type":14,"tag":100,"props":194,"children":195},{"class":107},[196],{"type":26,"value":139},{"type":14,"tag":100,"props":198,"children":199},{"class":142},[200],{"type":26,"value":201},"allowfullscreen",{"type":14,"tag":100,"props":203,"children":204},{"class":107},[205],{"type":26,"value":139},{"type":14,"tag":100,"props":207,"children":209},{"class":208},"ct-028869",[210],{"type":26,"value":211},"/",{"type":14,"tag":100,"props":213,"children":214},{"class":107},[215],{"type":26,"value":120},{"type":14,"tag":100,"props":217,"children":219},{"class":102,"line":218},4,[220,225,229],{"type":14,"tag":100,"props":221,"children":222},{"class":107},[223],{"type":26,"value":224},"    \u003C/",{"type":14,"tag":100,"props":226,"children":227},{"class":113},[228],{"type":26,"value":134},{"type":14,"tag":100,"props":230,"children":231},{"class":107},[232],{"type":26,"value":120},{"type":14,"tag":100,"props":234,"children":236},{"class":102,"line":235},5,[237,242,246],{"type":14,"tag":100,"props":238,"children":239},{"class":107},[240],{"type":26,"value":241},"\u003C/",{"type":14,"tag":100,"props":243,"children":244},{"class":113},[245],{"type":26,"value":73},{"type":14,"tag":100,"props":247,"children":248},{"class":107},[249],{"type":26,"value":250},">",{"type":14,"tag":28,"props":252,"children":254},{"id":253},"aspect-ratios",[255],{"type":26,"value":256},"Aspect Ratios",{"type":14,"tag":35,"props":258,"children":259},{},[260],{"type":26,"value":261},"Aspect ratios can be customized with embed helper classes. The following aspect ratio classes are available:",{"type":14,"tag":85,"props":263,"children":268},{"className":264,"code":266,"language":267,"meta":7},[265],"language-html","\u003C!-- 21:9 aspect ratio -->\n\u003Cdiv class=\"_embed:21:9\">\n    \u003Ciframe src=\"...\">\u003C/iframe>\n\u003C/div>\n","html",[269],{"type":14,"tag":93,"props":270,"children":271},{},[272],{"type":14,"tag":85,"props":273,"children":274},{"__ignoreMap":7},[275,284,316,357],{"type":14,"tag":100,"props":276,"children":277},{"class":102,"line":103},[278],{"type":14,"tag":100,"props":279,"children":281},{"class":280},"ct-086898",[282],{"type":26,"value":283},"\u003C!-- 21:9 aspect ratio -->\n",{"type":14,"tag":100,"props":285,"children":286},{"class":102,"line":123},[287,291,295,299,303,307,312],{"type":14,"tag":100,"props":288,"children":289},{"class":107},[290],{"type":26,"value":110},{"type":14,"tag":100,"props":292,"children":293},{"class":113},[294],{"type":26,"value":134},{"type":14,"tag":100,"props":296,"children":297},{"class":107},[298],{"type":26,"value":139},{"type":14,"tag":100,"props":300,"children":301},{"class":142},[302],{"type":26,"value":145},{"type":14,"tag":100,"props":304,"children":305},{"class":107},[306],{"type":26,"value":150},{"type":14,"tag":100,"props":308,"children":309},{"class":153},[310],{"type":26,"value":311},"\"_embed:21:9\"",{"type":14,"tag":100,"props":313,"children":314},{"class":107},[315],{"type":26,"value":120},{"type":14,"tag":100,"props":317,"children":318},{"class":102,"line":163},[319,323,327,331,335,339,344,349,353],{"type":14,"tag":100,"props":320,"children":321},{"class":107},[322],{"type":26,"value":129},{"type":14,"tag":100,"props":324,"children":325},{"class":113},[326],{"type":26,"value":174},{"type":14,"tag":100,"props":328,"children":329},{"class":107},[330],{"type":26,"value":139},{"type":14,"tag":100,"props":332,"children":333},{"class":142},[334],{"type":26,"value":183},{"type":14,"tag":100,"props":336,"children":337},{"class":107},[338],{"type":26,"value":150},{"type":14,"tag":100,"props":340,"children":341},{"class":153},[342],{"type":26,"value":343},"\"...\"",{"type":14,"tag":100,"props":345,"children":346},{"class":107},[347],{"type":26,"value":348},">\u003C/",{"type":14,"tag":100,"props":350,"children":351},{"class":113},[352],{"type":26,"value":174},{"type":14,"tag":100,"props":354,"children":355},{"class":107},[356],{"type":26,"value":120},{"type":14,"tag":100,"props":358,"children":359},{"class":102,"line":218},[360,364,368],{"type":14,"tag":100,"props":361,"children":362},{"class":107},[363],{"type":26,"value":241},{"type":14,"tag":100,"props":365,"children":366},{"class":113},[367],{"type":26,"value":134},{"type":14,"tag":100,"props":369,"children":370},{"class":107},[371],{"type":26,"value":250},{"type":14,"tag":85,"props":373,"children":376},{"className":374,"code":375,"language":267,"meta":7},[265],"\u003C!-- 16:9 aspect ratio -->\n\u003Cdiv class=\"_embed:16:9\">\n    \u003Ciframe src=\"...\">\u003C/iframe>\n\u003C/div>\n",[377],{"type":14,"tag":93,"props":378,"children":379},{},[380],{"type":14,"tag":85,"props":381,"children":382},{"__ignoreMap":7},[383,391,423,462],{"type":14,"tag":100,"props":384,"children":385},{"class":102,"line":103},[386],{"type":14,"tag":100,"props":387,"children":388},{"class":280},[389],{"type":26,"value":390},"\u003C!-- 16:9 aspect ratio -->\n",{"type":14,"tag":100,"props":392,"children":393},{"class":102,"line":123},[394,398,402,406,410,414,419],{"type":14,"tag":100,"props":395,"children":396},{"class":107},[397],{"type":26,"value":110},{"type":14,"tag":100,"props":399,"children":400},{"class":113},[401],{"type":26,"value":134},{"type":14,"tag":100,"props":403,"children":404},{"class":107},[405],{"type":26,"value":139},{"type":14,"tag":100,"props":407,"children":408},{"class":142},[409],{"type":26,"value":145},{"type":14,"tag":100,"props":411,"children":412},{"class":107},[413],{"type":26,"value":150},{"type":14,"tag":100,"props":415,"children":416},{"class":153},[417],{"type":26,"value":418},"\"_embed:16:9\"",{"type":14,"tag":100,"props":420,"children":421},{"class":107},[422],{"type":26,"value":120},{"type":14,"tag":100,"props":424,"children":425},{"class":102,"line":163},[426,430,434,438,442,446,450,454,458],{"type":14,"tag":100,"props":427,"children":428},{"class":107},[429],{"type":26,"value":129},{"type":14,"tag":100,"props":431,"children":432},{"class":113},[433],{"type":26,"value":174},{"type":14,"tag":100,"props":435,"children":436},{"class":107},[437],{"type":26,"value":139},{"type":14,"tag":100,"props":439,"children":440},{"class":142},[441],{"type":26,"value":183},{"type":14,"tag":100,"props":443,"children":444},{"class":107},[445],{"type":26,"value":150},{"type":14,"tag":100,"props":447,"children":448},{"class":153},[449],{"type":26,"value":343},{"type":14,"tag":100,"props":451,"children":452},{"class":107},[453],{"type":26,"value":348},{"type":14,"tag":100,"props":455,"children":456},{"class":113},[457],{"type":26,"value":174},{"type":14,"tag":100,"props":459,"children":460},{"class":107},[461],{"type":26,"value":120},{"type":14,"tag":100,"props":463,"children":464},{"class":102,"line":218},[465,469,473],{"type":14,"tag":100,"props":466,"children":467},{"class":107},[468],{"type":26,"value":241},{"type":14,"tag":100,"props":470,"children":471},{"class":113},[472],{"type":26,"value":134},{"type":14,"tag":100,"props":474,"children":475},{"class":107},[476],{"type":26,"value":250},{"type":14,"tag":85,"props":478,"children":481},{"className":479,"code":480,"language":267,"meta":7},[265],"\u003C!-- 4:3 aspect ratio -->\n\u003Cdiv class=\"_embed:4:3\">\n    \u003Ciframe src=\"...\">\u003C/iframe>\n\u003C/div>\n",[482],{"type":14,"tag":93,"props":483,"children":484},{},[485],{"type":14,"tag":85,"props":486,"children":487},{"__ignoreMap":7},[488,496,528,567],{"type":14,"tag":100,"props":489,"children":490},{"class":102,"line":103},[491],{"type":14,"tag":100,"props":492,"children":493},{"class":280},[494],{"type":26,"value":495},"\u003C!-- 4:3 aspect ratio -->\n",{"type":14,"tag":100,"props":497,"children":498},{"class":102,"line":123},[499,503,507,511,515,519,524],{"type":14,"tag":100,"props":500,"children":501},{"class":107},[502],{"type":26,"value":110},{"type":14,"tag":100,"props":504,"children":505},{"class":113},[506],{"type":26,"value":134},{"type":14,"tag":100,"props":508,"children":509},{"class":107},[510],{"type":26,"value":139},{"type":14,"tag":100,"props":512,"children":513},{"class":142},[514],{"type":26,"value":145},{"type":14,"tag":100,"props":516,"children":517},{"class":107},[518],{"type":26,"value":150},{"type":14,"tag":100,"props":520,"children":521},{"class":153},[522],{"type":26,"value":523},"\"_embed:4:3\"",{"type":14,"tag":100,"props":525,"children":526},{"class":107},[527],{"type":26,"value":120},{"type":14,"tag":100,"props":529,"children":530},{"class":102,"line":163},[531,535,539,543,547,551,555,559,563],{"type":14,"tag":100,"props":532,"children":533},{"class":107},[534],{"type":26,"value":129},{"type":14,"tag":100,"props":536,"children":537},{"class":113},[538],{"type":26,"value":174},{"type":14,"tag":100,"props":540,"children":541},{"class":107},[542],{"type":26,"value":139},{"type":14,"tag":100,"props":544,"children":545},{"class":142},[546],{"type":26,"value":183},{"type":14,"tag":100,"props":548,"children":549},{"class":107},[550],{"type":26,"value":150},{"type":14,"tag":100,"props":552,"children":553},{"class":153},[554],{"type":26,"value":343},{"type":14,"tag":100,"props":556,"children":557},{"class":107},[558],{"type":26,"value":348},{"type":14,"tag":100,"props":560,"children":561},{"class":113},[562],{"type":26,"value":174},{"type":14,"tag":100,"props":564,"children":565},{"class":107},[566],{"type":26,"value":120},{"type":14,"tag":100,"props":568,"children":569},{"class":102,"line":218},[570,574,578],{"type":14,"tag":100,"props":571,"children":572},{"class":107},[573],{"type":26,"value":241},{"type":14,"tag":100,"props":575,"children":576},{"class":113},[577],{"type":26,"value":134},{"type":14,"tag":100,"props":579,"children":580},{"class":107},[581],{"type":26,"value":250},{"type":14,"tag":85,"props":583,"children":586},{"className":584,"code":585,"language":267,"meta":7},[265],"\u003C!-- 1:1 aspect ratio -->\n\u003Cdiv class=\"_embed:1:1\">\n    \u003Ciframe src=\"...\">\u003C/iframe>\n\u003C/div>\n",[587],{"type":14,"tag":93,"props":588,"children":589},{},[590],{"type":14,"tag":85,"props":591,"children":592},{"__ignoreMap":7},[593,601,633,672],{"type":14,"tag":100,"props":594,"children":595},{"class":102,"line":103},[596],{"type":14,"tag":100,"props":597,"children":598},{"class":280},[599],{"type":26,"value":600},"\u003C!-- 1:1 aspect ratio -->\n",{"type":14,"tag":100,"props":602,"children":603},{"class":102,"line":123},[604,608,612,616,620,624,629],{"type":14,"tag":100,"props":605,"children":606},{"class":107},[607],{"type":26,"value":110},{"type":14,"tag":100,"props":609,"children":610},{"class":113},[611],{"type":26,"value":134},{"type":14,"tag":100,"props":613,"children":614},{"class":107},[615],{"type":26,"value":139},{"type":14,"tag":100,"props":617,"children":618},{"class":142},[619],{"type":26,"value":145},{"type":14,"tag":100,"props":621,"children":622},{"class":107},[623],{"type":26,"value":150},{"type":14,"tag":100,"props":625,"children":626},{"class":153},[627],{"type":26,"value":628},"\"_embed:1:1\"",{"type":14,"tag":100,"props":630,"children":631},{"class":107},[632],{"type":26,"value":120},{"type":14,"tag":100,"props":634,"children":635},{"class":102,"line":163},[636,640,644,648,652,656,660,664,668],{"type":14,"tag":100,"props":637,"children":638},{"class":107},[639],{"type":26,"value":129},{"type":14,"tag":100,"props":641,"children":642},{"class":113},[643],{"type":26,"value":174},{"type":14,"tag":100,"props":645,"children":646},{"class":107},[647],{"type":26,"value":139},{"type":14,"tag":100,"props":649,"children":650},{"class":142},[651],{"type":26,"value":183},{"type":14,"tag":100,"props":653,"children":654},{"class":107},[655],{"type":26,"value":150},{"type":14,"tag":100,"props":657,"children":658},{"class":153},[659],{"type":26,"value":343},{"type":14,"tag":100,"props":661,"children":662},{"class":107},[663],{"type":26,"value":348},{"type":14,"tag":100,"props":665,"children":666},{"class":113},[667],{"type":26,"value":174},{"type":14,"tag":100,"props":669,"children":670},{"class":107},[671],{"type":26,"value":120},{"type":14,"tag":100,"props":673,"children":674},{"class":102,"line":218},[675,679,683],{"type":14,"tag":100,"props":676,"children":677},{"class":107},[678],{"type":26,"value":241},{"type":14,"tag":100,"props":680,"children":681},{"class":113},[682],{"type":26,"value":134},{"type":14,"tag":100,"props":684,"children":685},{"class":107},[686],{"type":26,"value":250},{"type":14,"tag":688,"children":689},"style",[690],{"type":26,"value":691},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}\n.ct-028869{color:#B31D28;font-style:italic;}\n.dark-theme .ct-028869{color:#FDAEB7;font-style:italic;}\n.ct-086898{color:#6A737D;}",{"title":7,"searchDepth":123,"depth":123,"links":693},[694],{"id":23,"depth":123,"text":9,"children":695},[696,697],{"id":30,"depth":163,"text":33},{"id":253,"depth":163,"text":256},"markdown","content:docs:utilities:css:embed.md","content","docs/utilities/css/embed.md","md",1794582261447]