[HTML][新手] 14. 影片與網頁嵌入(iframe) - 例如youtube - 進度條

這樣就把影片嵌入到自己的網站了，youtube等影片就能直接在你的網站上播放，這個就是嵌入的功能。

讓我們來解析一下iframe的屬性：. 進度條 登入 線上教學 優惠組合 顧問服務 架站服務 所有文章 系列教學 筆記 [HTML][新手]14.影片與網頁嵌入(iframe)-例如youtube [HTML][新手]14.影片與網頁嵌入(iframe)-例如youtube 作者:進度條編輯群 更新日期: 2020/10/03 此文章也有影片介紹，可以搭配影片一起學習！ 01.影片與網頁嵌入(iframe)-例如youtube (所屬課程) ToviewthisvideopleaseenableJavaScript,andconsiderupgradingtoawebbrowserthat supportsHTML5video 以下正式開始文章 影片與網頁嵌入(iframe) iframe標籤可以把youtube或其他影片網站會想嵌入到自己網站裡面去，例如我們想要將某個youtube影片放到自己的網頁時，點選影片下方的「嵌入」標籤並將語法全部複製。

    貼在你要呈現的網頁位置上，記得是完全複製喔！包含...       輸出結果：       這樣就把影片嵌入到自己的網站了，youtube等影片就能直接在你的網站上播放，這個就是嵌入的功能。

讓我們來解析一下iframe的屬性：     style–可設定長寬度等CSS樣式(長寬度建議寫在style裡) src–嵌入的影片或網址 frameborder–0代表關閉邊框，1代表打開邊框，若iframe內未設置此屬性，預設值為1(打開邊框) allowfullscreen–表示允許全螢幕，若iframe內未設置此屬性，代表不能設置全螢幕 我們在chrome瀏覽器空白處按滑鼠右鍵→檢查，點擊iframe左側的箭頭，         會發現有個#document的項目，點開後又會發現一個完整的html檔，代表iframe是將網頁的內容整個嵌過來，         我們可以利用這個邏輯，將其他網頁嵌入到我們自己的網站。

例如我們想嵌入之前寫好的網頁，可以這樣寫：          輸出結果：       這樣就把其他頁面嵌入進來了。

  [補充]有些網路駭客會利用這種方式，故意將某些銀行等網頁嵌入自己的網頁，並將嵌入的內容大小設定到肉眼無法察覺，再利用JavaScript惡意盜取使用者資訊。

現在的瀏覽器都預設防護這種攻擊了，所以記得不要用太舊的瀏覽器喔！       例如我用https://www.google.com做測試，     輸出結果：     代表google有做一些設定防止被其他網頁嵌入。

大家也可以多試幾個網站看看那些網站可以被嵌入喔！   錯誤訊息會是： Refusedtodisplay'https://www.google.com.tw/'inaframebecauseitset'X-Frame-Options'to'sameorigin'. 代表只能被自己的網站嵌入。

      最後，如果你喜歡我們的文章，別忘了到我們的FB粉絲團按讚喔!! 圖文系列教學: HTML新手網站基礎教學 [HTML][新手]14.影片與網頁嵌入(iframe)-例如youtube [HTML][新手]15.輸入欄位(input)-簡介與瀏覽器顯示比較 從另一個方向介紹網頁、HTML、CSS與JavaScript。

[HTML][新手]01.程式編輯器Brackets安裝教學 [HTML][新手]02.什麼是HTML與如何建立它 [HTML][新手]03.分行與分隔線(br,hr)與註解 [HTML][新手]04.中文編碼表示metacharset [HTML][新手]05.文字標籤h1~h6,p與span [HTML][新手]06.其他方便的文字標籤與圖文編輯器的關係-以CKEditor為例 [HTML][新手]07.Div標籤以及CSS高,寬與背景顏色屬性 [HTML][新手]08.其他與Div相似的HTML5所建議的標籤Main,Header,Footer等 [HTML][新手]09.tag(連結標籤)介紹1,轉址與開啟新頁籤 [HTML][新手]10.tag(連結標籤)介紹2,定位點與寄信 [HTML][新手]11.列表介紹ul,ol,dl [HTML][新手]12.表格介紹Table [HTML][新手]13.Imgtag-圖片介紹 進度條編輯群 進度條編輯團隊 關聯文章 暫時沒有關聯文章喔!! 最新文章 如何避免自製被WordPress外掛GPL授權？顧客購買「付費版」可以免費無限複製不用付授權費嗎？ 開不開源是個人選擇，豐富社群當然是件好事。

但是被強迫開源就不是開發者所樂見的事了。

【微創業】電商為何要自架站台？被平台綁架的下場只有流量營業額減半等著你-自架站台的重要性(二) 我電商就賺飽了，為何要架設一個網站？架設網站一定要用WordPress嗎？ 【IKoula】使用LinuxVPS上架設PHP站台全紀錄！從Ubuntu設定到網站上線一次搞定 經濟實惠的IKoulaVPS，適合初學者練習與進階商業架站的好選擇！ 後端工程師(BackendDeveloper)是什麼？成為後端需要學習什麼技術？很難嗎？ 前端與後端差別在哪？如何選擇？為何後端工程師也要學習基礎「前端」技術？ 想快速保障網站安全？快嘗試SucuriCDNWAF雲端應用防火牆！遠振代理台灣專業服務協助設定。

架站不會程式？WordPress被入侵？使用SucuriCDNWAF以銅板價格讓你一天內就確保網站安全！ WordPress推薦必裝外掛(一)，精選常用Plugins超好用清單，免費實用外掛絕不能錯過！ WordPress外掛這麼多種，先從免費實用外掛開始，這些是即使會寫程式也很方便的外掛 網站電商如同實體店面，盲目跟風設計真的好嗎？讓我們來介紹UI、UX的重要性 Ikea如迷宮版的賣場動線、全聯呈現多樣商品的壅擠成列都有他們的原因，你的網站設計概念為何？ 純網銀是有多【純】?與傳統銀行的數位銀行又有什麼差異呢？ 這批很「純」！淺談來勢兇兇的「純網銀」！ WAF網站應用程式防火牆，輕鬆增加網站的安全性，架設網站一定要了解！ 如果不知道自己的網站有什麼漏洞，那就在前面造一座牆先擋住吧！ 【微創業】嘗試斜槓賣商品，C2C自營零售電商經驗談-由購物平台開始(一) 猜想會遇到什麼問題還不夠，直接頭洗下去才真實。

顯示全部 線上課程 Bootstrap5與Sass，製作RWD客製化響應式網站 Laravel後端PHP架站，APIServer與訂閱軟體全攻略 WordPress-從頭教起的網站架設 程式客製WooCommerce，WordPress購物系統全解析 iOS-Swift5手機程式開發，使用APP與網站互動 Electron跨平台桌面程式，建立點餐系統與裝置控制 C語言-近代程式語言的基礎 ES6,ReactJS與Webpack，前端JavaScript全攻略 從零開始的SQL語法與資料庫設計-以MySQL來攻略 Linux雲端伺服器，用AWS暸解Apache與Nginx HTML,CSS,JavaScript,jQuery網頁從零開始 Git程式版本管控-由簡單到難 快速開發，從頭教起的RubyonRails後端之旅 行動第一!使用Bootstrap建立響應式RWD網站!