【Web Frontend】限制 iframe 的尺寸上限又能夠有 RWD

更新於 發佈於 閱讀時間約 1 分鐘

作為一個非常不專業的前端初學者,有陣子常常卡在公司官網,要插入 Youtube 影片無法RWD(響應式)的問題。

跟不熟悉 網頁技術的朋友們介紹,RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排,在這個人手一機的時代,特別重要。

我們的網站廠商的系統,預設有提供一個 影片RWD樣式,但是影片就是直接滿版,主管不太滿意,今天上班的時候總算靠著 GPT 教我正確的修改完了~~~~



大家可以在這篇文章,縮放一下視窗大小試試看,

Youtube 的框框會跟著瀏覽器縮放歐~~~~


順手測試下 Vocus 的響應式設計,恩 非常的順暢(以為每個人都跟自己一樣菜)

順便測試一下 方格子的 RWD ㄏㄏ

順便測試一下 方格子的 RWD ㄏㄏ


HTML

由於我們的系統樣式文件,不太能自己動,所以我就直接把樣式寫在 HTML 裡面了,請見諒。

修改前,已經上網找了人家的範例,自己拼拼湊湊,結果一直試不出想要的效果......

<div style="width: 100%; max-width: 600px; margin: 0 auto; position: relative;">
<div
style="position: relative; padding-bottom: 56.25%; margin: 0 auto; height: 0; width: 100%;"
>
<iframe
src="https://www.youtube.com/embed/_U7uwcWna0g"
width="100%"
height="100%"
frameborder="0"
allowfullscreen="true"
></iframe>
</div>
</div>



修改後,甚至還請 GPT-4o 教教我到底哪裡寫錯了..........

<div style="width: 100%; max-width: 600px; margin: 0 auto; position: relative;">
<div
style="position: relative; padding-bottom: 56.25%; height: 0; width: 100%;"
>
<iframe
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
src="https://www.youtube.com/embed/6qKtmDrhaww?rel=1&amp;si=oDaqA84fvnI1YwBh"
width="100%"
height="100%"
frameborder="0"
allowfullscreen="true"
></iframe>
</div>
</div>

由於我希望影片最大寬度 600px,所以就設定第一層的 div max-width 為600px。

有不少關鍵概念,把div 的height 設定為0,這樣就能用 padding-bottom來設定高度,並且使 高度依照寬度自動成比例。56.25% = 16/9 的比例。(padding-bottom 和 max-width 放同一層無法生效,所以才放第二層)

最後是我自己忽略(沒學好)的部分,position: abolute,才會使 iframe 占滿外層的容器。

僅此紀錄一個菜機試錯了好久才得出的答案。


留言
avatar-img
留言分享你的想法!
avatar-img
🦙切の人生雜學
117會員
114內容數
一些生活的體悟,融合閱讀心得、或是各類影視作品、遊戲等。世界的一切都是有關連的,希望能用文字把所有連結寫出來。
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
因為最近有在經營Youtube,也有看了一些教學,以及有些經營小心得
Thumbnail
因為最近有在經營Youtube,也有看了一些教學,以及有些經營小心得
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
作為一個非常不專業的前端初學者,有陣子常常卡在公司官網,要插入 Youtube 影片無法RWD(響應式)的問題。 跟不熟悉 網頁技術的朋友們介紹,RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排,在這個人手一機的時代,特別重要。
Thumbnail
作為一個非常不專業的前端初學者,有陣子常常卡在公司官網,要插入 Youtube 影片無法RWD(響應式)的問題。 跟不熟悉 網頁技術的朋友們介紹,RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排,在這個人手一機的時代,特別重要。
Thumbnail
RWD(適應性網頁設計)不僅能提高使用者體驗,還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理,RWD設計能顯著提升網站在搜尋引擎中的排名。
Thumbnail
RWD(適應性網頁設計)不僅能提高使用者體驗,還對SEO有深遠影響。透過提升使用者體驗、減少重複內容、加快頁面載入速度、符合移動優先索引和簡化網站管理,RWD設計能顯著提升網站在搜尋引擎中的排名。
Thumbnail
前幾天提到我討厭短影片的套路⋯⋯ 這邊列一些我覺得很爛,但其實對流量很有幫助的陰招,原理都是為了拉高「完看率」或「互動率」這兩個現在演算法最重視的指標。
Thumbnail
前幾天提到我討厭短影片的套路⋯⋯ 這邊列一些我覺得很爛,但其實對流量很有幫助的陰招,原理都是為了拉高「完看率」或「互動率」這兩個現在演算法最重視的指標。
Thumbnail
網站建置後,為了確保優秀的使用者體驗和網站的功能性,進行徹底的後續優化和測試是不可或缺的。以下是建議的重點測試項目: 響應式網頁設計(RWD)測試: 確保網站在各種設備(如桌面電腦、平板和手機)上均展示良好。這包括在不同的屏幕尺寸和解析度上測試,確保網站能夠自如適應不同的顯示需求。
Thumbnail
網站建置後,為了確保優秀的使用者體驗和網站的功能性,進行徹底的後續優化和測試是不可或缺的。以下是建議的重點測試項目: 響應式網頁設計(RWD)測試: 確保網站在各種設備(如桌面電腦、平板和手機)上均展示良好。這包括在不同的屏幕尺寸和解析度上測試,確保網站能夠自如適應不同的顯示需求。
Thumbnail
響應式網頁設計(Responsive Web Design,簡稱RWD)是一種設計和開發網頁的方法,旨在使網站能夠根據不同設備和屏幕尺寸的大小,自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗,無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
Thumbnail
響應式網頁設計(Responsive Web Design,簡稱RWD)是一種設計和開發網頁的方法,旨在使網站能夠根據不同設備和屏幕尺寸的大小,自動調整和適應其外觀和佈局。這種設計方法的目的是提供一致的用戶體驗,無論用戶是在桌面電腦、平板電腦還是手機等設備上訪問網站。
Thumbnail
這篇文章將教您如何在WordPress網頁上連接YouTube視頻,提升訪客留存時間,提供更生動的內容並增加社交分享。分為三個步驟:在YouTube上上傳視頻、從YouTube獲取嵌入代碼和在網站上嵌入YouTube視頻。
Thumbnail
這篇文章將教您如何在WordPress網頁上連接YouTube視頻,提升訪客留存時間,提供更生動的內容並增加社交分享。分為三個步驟:在YouTube上上傳視頻、從YouTube獲取嵌入代碼和在網站上嵌入YouTube視頻。
Thumbnail
最近有網友反應,使用 Adblock 廣告攔截器觀看 YouTube 影片時,影片載入速度變得非常慢,甚至直接卡住,無法觀看。 這是因為 YouTube 開始嚴抓廣告攔截器,除了跳通知提醒用戶關閉廣告攔截器,現在也祭出新招,讓 YouTube 影片載入變超慢,甚至直接卡住[1][4]。
Thumbnail
最近有網友反應,使用 Adblock 廣告攔截器觀看 YouTube 影片時,影片載入速度變得非常慢,甚至直接卡住,無法觀看。 這是因為 YouTube 開始嚴抓廣告攔截器,除了跳通知提醒用戶關閉廣告攔截器,現在也祭出新招,讓 YouTube 影片載入變超慢,甚至直接卡住[1][4]。
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News