iframe 嵌入網頁語法：基本寫法、RWD 自適應寬度與網頁無法嵌入的原因

想在自己的網頁裡放一段 YouTube 影片、一張 Google 地圖，或是另一個網頁的內容，用的都是 HTML 的 iframe 標籤。它就像在網頁上開一扇窗，窗裡顯示的是另一個網址的內容。

基本寫法

<iframe
  src="https://www.example.com/page.html"
  title="範例網站的活動報名表"
  width="600"
  height="400"
  loading="lazy">
</iframe>

• src：要嵌入的網址。
• title：用一句話說明這個 iframe 的內容。使用螢幕報讀軟體的訪客靠它知道這裡是什麼，是無障礙設計的必要項目。
• width、height：寬度與高度，單位是像素（不用寫 px）。實務上通常改用 CSS 控制，見下面的 RWD 寫法。
• loading="lazy"：捲到附近才載入。iframe 在頁面下方時加上它，網頁一開始會載入得比較快；放在第一個畫面的 iframe 就不要加。

其他常用屬性

• allow：允許 iframe 使用哪些功能，例如 allow="fullscreen"（全螢幕）、allow="autoplay"（自動播放）。YouTube、Google 地圖提供的嵌入碼通常已經寫好。
• allowfullscreen：舊式的允許全螢幕寫法，保留也沒關係。
• referrerpolicy：控制要不要告訴對方網站，是從哪一頁嵌入的。
• sandbox：限制 iframe 裡的網頁能做的事（執行程式、送出表單、開新視窗等），嵌入不完全信任的內容時使用。只寫 sandbox 不給值代表全部禁止，再依需要逐項開放，例如 sandbox="allow-scripts allow-forms"。

使用 sandbox 時要注意：如果嵌入的是自己網域的頁面，又同時開放 allow-scripts 和 allow-same-origin，裡面的程式就能自己把 sandbox 拿掉，等於沒有限制。

舊寫法裡的屬性要換掉

這篇文章舊版的寫法是：

<iframe src="輸入網址" width="500" height="500" scrolling="no" frameborder="1" align="center"></iframe>

其中 frameborder、scrolling、align 在 HTML5 都已經列為過時的屬性，建議這樣處理：

• frameborder（邊框）：改用 CSS 的 border。不要邊框寫 border: 0，要邊框寫 border: 1px solid #ccc。
• align="center"（置中）：iframe 預設是行內元素，改成 display: block，再用 margin-inline: auto 置中。
• scrolling="no"（不顯示捲軸）：這個屬性雖然過時，目前的瀏覽器仍然支援，但 CSS 沒有直接對應的寫法（在 iframe 上設定 overflow: hidden，不會影響裡面網頁的捲軸）。比較好的做法是讓 iframe 的高度足夠放下全部內容，自然就不會出現捲軸，做法請看iframe 自動適應高度。

改寫後：

<iframe class="embed-frame" src="https://www.example.com/page.html" title="範例網頁" loading="lazy"></iframe>

.embed-frame {
  display: block;
  width: 100%;
  max-width: 500px;
  height: 500px;
  margin-inline: auto;
  border: 0;
}

RWD：讓 iframe 跟著螢幕寬度縮放

直接寫死 width="560"、height="315"，在手機上會超出畫面。現在最簡單的做法，是用 CSS 的 aspect-ratio 固定比例：寬度 100%、高度依比例自動計算。

<iframe
  class="video-frame"
  src="https://www.youtube.com/embed/影片ID"
  title="公司簡介影片"
  width="560"
  height="315"
  allow="fullscreen; picture-in-picture"
  loading="lazy">
</iframe>

.video-frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

• aspect-ratio: 16 / 9：一般影片的比例。Google 地圖可以用 4 / 3，或直接給一個固定高度。
• height: auto 一定要寫：HTML 裡的 height="315" 會被當成固定高度，要用 CSS 蓋掉，比例才會生效。

以前的教學會在 iframe 外面包一層 div，用 padding-top: 56.25% 撐出比例。現在主流瀏覽器都支援 aspect-ratio，不需要再這麼麻煩。

常見的嵌入：YouTube 與 Google 地圖

• YouTube：影片下方按「分享」→「嵌入」，複製提供的程式碼，再加上上面的 class 就能自動縮放。YouTube 的嵌入選項裡也有「隱私強化模式」，開啟後網址會變成 www.youtube-nocookie.com，可以減少 YouTube 對訪客的追蹤。
• Google 地圖：在 Google 地圖找到地點後，按「分享」→「嵌入地圖」，複製 HTML 程式碼。

同一頁放很多支 YouTube 影片會拖慢網頁，可以參考YouTube 影片縮圖網址一文，先用縮圖代替，點了再播放。

為什麼有些網頁嵌入不了？

有時候 iframe 裡只出現一個灰色畫面，寫著網站拒絕連線，或是一片空白。常見的原因：

• 對方網站禁止被嵌入：很多網站（例如 Google 搜尋、Facebook、銀行網站）會用 X-Frame-Options 或 Content-Security-Policy 的 frame-ancestors 設定，告訴瀏覽器「不准被別的網站用 iframe 嵌入」，目的是防止被包裝成釣魚網站。這是對方的設定，沒有辦法從你的網站繞過，只能改用連結，或使用對方提供的官方嵌入方式。
• 你的網站是 https，嵌入的網址是 http：瀏覽器會把不安全的內容擋掉，要改用 https 的網址。
• 網址用錯：YouTube 要用 /embed/ 開頭的網址，一般看影片的 watch?v= 網址不能直接放進 iframe。

反過來說，如果你不希望自己的網站被別人嵌入，也可以在主機設定同樣的標頭，寫法請看.htaccess 用法大全裡「防止網頁被嵌入」的段落。

iframe 以外的嵌入標籤

• embed、object：以前用來嵌入 Flash 動畫等外掛程式的內容。Flash 已經在 2020 年底停止支援，這兩個標籤現在很少用到。
• PDF 檔案：可以用 iframe 直接嵌入 PDF，但手機瀏覽器對內嵌 PDF 的支援不一致，最好另外放一個下載連結。
• 自己主機上的影片、音樂檔：用 video、audio 標籤播放，不需要 iframe。

使用 iframe 的注意事項

• 搜尋引擎不一定會把 iframe 裡的內容算成這一頁的內容。公司介紹、服務說明這類重要的文字，要直接寫在網頁裡，不要放在 iframe 裡。
• 每個 iframe 都等於多載入一個網頁，數量越多網頁越慢，頁面下方的 iframe 記得加上 loading="lazy"。
• 嵌入別人的網頁前，先確認對方允許，也要注意著作權。

延伸閱讀

• iframe 自動適應高度怎麼做？同網域與跨網域的寫法（含 postMessage 範例）
• 連結另開新視窗怎麼寫？target=_blank 與 noopener 用法（含 iframe 內連結）
• YouTube 影片縮圖網址怎麼取得？各種尺寸的縮圖網址一次整理

影片、地圖、報名表要放進網站又不拖慢速度，在設計階段就規劃好最省事。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供 RWD 響應式網站設計，也有攝影剪輯服務，歡迎來聊聊。