Share
Intrinsic förhållanden är ett tillvägagångssätt för att expandera och kontrahera element på en webbsida, så att de kan vara flytande samtidigt som de begränsar deras proportioner. Thierry Koblentz föreslog först tanken tillbaka 2009.
De används ofta i samband med video eftersom varken bredden eller höjden på en iframe (elementet som vanligtvis används vid inbäddning av videoinnehåll) inte automatiskt skalas för flytande webbplatser.
Lång historia kort: video är inte responsiv som standard.
Stora skrivningar har gjorts om ämnet. Den mest kända är Thierry Koblentzs listlista, som tyder på att göra mycket med position: relativ och några hackar för gamla Internet Explorer, och när du är färdig med att implementera den, har du lagt till dussintals linjer kod till din markup och CSS bara för att göra en video responsiv. argh!
Tack och lov har vi nu tillgång till vw-dimensioneringsenheten och så länge du inte behöver stödja gamla Android-enheter eller IE8, är det relativt säkert att använda.
Allt vi behöver göra är att ställa in iframes bredd till 100% och sätt sedan dess höjd till följande formel: (100 * förhållande) vw.
När det gäller de flesta YouTube-videoklipp är ditt förhållande 16: 9 (annars uttryckt som 9/16), så använd följande CSS-kod för att göra en YouTube-video-mottagare:
iframe bredd: 100%; höjd: 56,25vw; / * 100 * (9/16) * /
Detta görs ännu enklare när du använder en förprocessor som Sass, LESS eller Stylus, eftersom du kan överföra vilka förhållanden du vill ha på flugan. Till exempel för en 4: 3-video kan du skriva:
iframe bredd: 100% höjd: (100 * (3/4)) vw
Vad händer om vi vill lägga till en marginal eller en gräns för den? Det verkar slänga allting För att åtgärda det behöver vi helt enkelt lägga till våra gränser och marginaler till ett inslagningselement och dra sedan gränsen från vår höjd med calc. Vi lägger till display: block till vår iframe för att hålla det från att skapa en lucka längst ner i videon.
.vid margin: 2rem kant: 30px solid röd iframe bredd: 100% höjd: calc ((100vw - 60px) * (9/16)) display: block
Nästa "gotcha" är vad om vi vill att vår video ska ligga inuti en behållare som bara sträcker sig över 70% av utsikten? Enkelt, vi ändrar bara 100vw i vår beräkningsfunktion till 70vw.
Det är allt det finns! Super lätt responsiva videor. För mer information om förhållanden och vw-enheter kolla Jason Talberts briljanta CodePen.
Accentsconagua