在網頁上嵌入iframe也可以有RWD嗎?
答案是,可以。
在網頁中嵌入影片時,並無法根據瀏覽裝置的螢幕大小縮放與調整,只會以固定大小呈現。
在 Bootstrap 3.2 以後的版本,已支援嵌入<iframe>
根據外部容器的寬度,自動建置一個固定的比例,讓影片在各種瀏覽裝置上自適應調整縮放。
目前已提供 16:9 和 4:3 的比例。
使用方法:
- 建立一個
<div>
容器,並加入 embed-responsive embed-responsive-16by9 的class。
- 複製影片的嵌入碼,接著將
<iframe>
預設的寬高度刪除,在<iframe>
中加入 embed-responsive-item 的class。
- 最後,將
<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:9 , 4by3代表影片寬高比是4:3。