各位觀眾晚安，您目前收正在看的是coding小白盜版學校官網ㄉ30天挑戰日記～在這三十天內，我會把複刻學校國立臺北教育大學的官網當作目標，從最基礎的前端html、css、js...開始邊做邊學，紀錄每天的進度。而今天是正式開始進行盜版大業的第一天，廢話不多說，我們直接進入正題吧୧⍢⃝୨

前置作業

在開始正式coding前，要先觀察和蒐集材料。首先打開我們的目標「校網首頁」，照著老師教的小技巧找到：三個點點-更多工具-開發人員工具

打開後可以看到一堆好像很厲害的代碼

好，看不懂，關起來。

還是先下載素材好了：最原始粗暴的右鍵-另存新檔到我的img資料夾

...沒想到icon居然不能下載！但這難不倒我，叫出figma自己畫！

大功告成～

撰寫HTML

接著分析架構，由上到下劃分為header、nav、article、footer，內部又各自包含section和div

分析完成後就正式開始coding了～
沒想到第一天就遇到了新挑戰，是沒學過的youtube小視窗！

但不需要緊張，直接呼叫可靠的chatgpt學長。學長說，我們可以直接進入youtube影片下方的分享-嵌入，複製整段代碼貼上檔案

好學的我又向學長請教這一大串代碼的後半段是什麼意思，學長回答：

這串看起來有點長，其實是 YouTube 給 iframe 的安全/功能設定，我幫你逐一拆解 👇

1. allow="..."
   這個屬性是 Permissions Policy（以前叫 Feature Policy），用來告訴瀏覽器「這個 iframe 允許使用哪些功能」。
   裡面的值用 ; 分隔：
   accelerometer → 允許使用裝置的加速度計（例如影片根據手機方向旋轉）。
   autoplay → 允許影片自動播放（但通常還要符合瀏覽器的靜音策略）。
   clipboard-write → 允許 iframe 內的內容把資料寫到剪貼簿。
   encrypted-media → 允許播放加密媒體（例如受 DRM 保護的音樂/影片）。
   gyroscope → 允許使用裝置的陀螺儀（方向感測）。
   picture-in-picture → 允許影片進入「子母畫面」（小視窗浮動播放）。
   web-share → 允許使用瀏覽器的「分享 API」（像是呼叫手機的系統分享選單）。
2. referrerpolicy="strict-origin-when-cross-origin"
   這個是 隱私/安全設定，控制當你從這個 iframe 點出去時，會把多少「來源資訊 (referrer)」傳給對方網站。
   strict-origin-when-cross-origin → 如果連到同一個網域，就傳完整網址；如果跨網域，只傳「來源」(origin)，不會洩漏完整路徑，提升隱私。
3. allowfullscreen
   一個布林屬性，意思是允許這個 iframe 切換成全螢幕模式。
   如果沒加，使用者就不能按「全螢幕」按鈕。

✅ 總結
這串設定主要是：
allow="..." → 開哪些功能給 iframe 用
referrerpolicy → 控制隱私資訊怎麼傳
allowfullscreen → 允許全螢幕
所以它不會改變你影片的樣子，而是確保「影片能正常播放，該有的功能可以用，並且保護隱私」。

原來如此，聽懂後實際操作...大成功！

知識+1，今天真是充實的一天，明天繼續努力，收工～