• BootStrap RWD 編排
  • import_contacts 如何將影片嵌入WRP網頁?
    117
適用範圍

網頁開發人員、網站維護人員

實用性:
重要性:

在網頁上嵌入iframe也可以有RWD嗎?

答案是,可以。

在網頁中嵌入影片時,並無法根據瀏覽裝置的螢幕大小縮放與調整,只會以固定大小呈現。

Bootstrap 3.2 以後的版本,已支援嵌入<iframe>根據外部容器的寬度,自動建置一個固定的比例,讓影片在各種瀏覽裝置上自適應調整縮放。

目前已提供 16:94:3 的比例。

使用方法:

  1. 建立一個<div>容器,並加入 embed-responsive embed-responsive-16by9 的class。
  2. 複製影片的嵌入碼,接著將<iframe>預設的寬高度刪除,在<iframe>中加入 embed-responsive-item 的class。
  3. 最後,將<iframe>包在<div>容器中。

程式碼如下:

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>

6by9 代表影片寬高比是 16:94by3代表影片寬高比是4:3