回應式嵌入

將影片、地圖和行事曆等嵌入式內容包覆在回應式嵌入容器中，以維持正確的長寬比，不論螢幕大小為何。

若要確保嵌入式內容在螢幕寬度變更時維持其長寬比，請將 iframe、object、embed 或 video 包覆在具有 .responsive-embed 類別的容器中。

<div class="responsive-embed">
  <iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
</div>

長寬比

加入長寬比類別以變更回應式嵌入的長寬比。預設長寬比為 4:3。.widescreen 類別會將容器的長寬比變更為 16:9。

觀看影片中的這部分

<div class="responsive-embed widescreen">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/WUgvvPRH7Oc" frameborder="0" allowfullscreen></iframe>
</div>

長寬比類別是由設定檔中 $responsive-embed-ratios 地圖中的金鑰所產生。僅需要 default 金鑰。例如，您可以將預設長寬比設為 16:9，移除寬螢幕，並加入其他長寬比。

$responsive-embed-ratios: (
  default: 16 by 9,
  vertical: 9 by 16,
  panorama: 256 by 81,
  square: 1 by 1,
);

觀看影片中的這部分

<div class="responsive-embed panorama">
  <iframe width="1024" height="315" src="https://www.youtube.com/embed/bnD9I24EL_4" frameborder="0" allowfullscreen></iframe>
</div>

Sass 參考

變數

可以在專案的設定檔中使用這些 Sass 變數自訂此元件的預設樣式。

名稱	類型	預設值	說明
`$responsive-embed-margin-bottom`	數字	`rem-calc(16)`	回應式嵌入式容器下方的邊界。
`$responsive-embed-ratios`	對應	`預設：4 比 3 寬螢幕：16 比 9`	用於決定回應式嵌入式容器的 padding-bottom 的長寬比。

混合

我們使用這些混合來建立此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件中建立自己的類別結構。

responsive-embed

@include responsive-embed($ratio);

建立一個回應式嵌入式容器。

參數	類型	預設值	說明
`$ratio`	字串或清單	`預設`	容器的長寬比。可以是 `$responsive-embed-ratios` 對應中的金鑰，或格式化為 `x 比 y` 的清單。