【HTML系列#9】iframe 介紹與教學,一招輕鬆嵌入影片!

HTML iframe

你是否在其他網站上都會看到用 HTML 語法嵌入影片的狀況?

讓使用者可以在同一個頁面就能觀看影片,大大增加使用者體驗

但你知道這是怎麼做到的嗎?快來看看HTML iframe介紹與教學吧!

本篇內容包含 :

  • HTML iframe 是什麼?
  • iframe 怎麼用?
  • iframe 的 Q&A

前端入門系列 – HTML篇

本系列會介紹與教學關於HTML最基礎的知識語法,歡迎分享與留言討論!

HTML系列#1: 【HTML系列#1】HTML是什麼?5分鐘做出簡易網頁!

HTML系列#2: 【HTML系列#2】h1~h6介紹與教學,影響SEO的重要關鍵!

HTML系列#3: 【HTML系列#3】div、p、span 介紹與教學,區塊、段落一篇搞懂!

HTML系列#4: 【HTML系列#4】br、hr、& nbsp 介紹與教學,輕鬆加上斷行、分隔線與空格!

HTML系列#5: 【HTML系列#5】href、a、target介紹與教學,一起自訂傳送門!

HTML系列#6: 【HTML系列#6】ul、ol 介紹與教學,一招搞定清單列表!

HTML系列#7: 【HTML系列#7】img 介紹與教學,一行指令豐富你的網頁!

HTML系列#8: 【HTML系列#8】table 表格介紹與教學,5 分鐘搞懂表格!

HTML系列#9: 【HTML系列#9】iframe 介紹與教學,一招輕鬆嵌入影片!

HTML iframe 是什麼?

HTML iframe 介紹

iframe 又稱為內置框架,也就是把一個網頁或影片內置在某個網頁裡面的概念,像是大家常見的youtube影片、FB粉絲團、ig粉絲團

這都是利用 iframe 來達成,而 iframe 內嵌之後也可以透過屬性修改高度與寬度,非常適合有在經營社群行銷和部落格的人使用


HTML iframe 範例影片 (英文版)

這部 iframe 範例影片就是用 iframe 內嵌的哦!




iframe 屬性介紹

iframe 是屬於需要起始標籤與結束標籤,而裡面也有一些屬性可以設定,以下一一介紹

src 影片、網頁網址來源

src 屬性和 img 標籤有點雷同,都是需要一條網址來導入來源,而來源必須注意是否安全且正常,否則會影響到使用者體驗與SEO分數

HTML iframe
src 影片、網頁網址來源

寬度 width、高度 height

iframe 可以自訂寬度與高度,讓影片或嵌入內容可以依照版主想要的大小調整

但是個人建議不用特別去調整,因為現在很多裝置大小不同,讓 iframe 自行抓到合適的大小顯示就可以了

HTML iframe width and height
寬度 width、高度 height


iframe 怎麼用?

src 影片來源

範例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <iframe src="https://www.youtube.com/embed/dhV0DvtKfBc"></iframe>
    
</body>
</html>
src 屬性範例程式碼
src 屬性範例程式碼

輸出結果

src 屬性輸出結果
src 屬性輸出結果


寬度 width、高度 height

原本影片的寬度與長度是設定100%,也就是iframe會去抓網頁大小,自動調整成合適的大小顯示出來

而這邊我把長寬改成度定400*200,因此結果顯示會大一些

範例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <iframe src="https://www.youtube.com/embed/dhV0DvtKfBc"
            width="200px" height="100px"></iframe>
    
</body>
</html>
寬度與高度範例程式碼
寬度、高度範例程式碼

輸出結果

寬度與高度輸出結果
寬度、高度輸出結果


iframe 的 Q&A

Q1 : 除了影片之外,其他網頁或是社群媒體可以嵌入嗎?

A1 :

可以,只需要把 src 裡面的網址改成你要嵌入的社群媒體網址就可以了哦!


Q2 : 可以嵌入圖片嗎?

A2 :

可以,但是圖片還是建議使用 img 標籤,因為 iframe 其實是嵌入另一個網頁,很少圖片是本身為一個網頁的,因此還是建議圖片使用img


Q3 : iframe 會透過 CSS 調整樣式嗎?

A3 :

通常不會這樣做,唯一需要調整的大概只有寬度以及高度,個人很少看到再去做特別的調整,我自己在製作網頁也沒有這樣做過



總結

iframe 對於一個有在經營網站、部落格和社群媒體的人來說是一個非常好用的東西

網站部落格本身可以分享在社群媒體,而社群媒體也可以透過 iframe 嵌入在網站內,一舉兩得!

希望這篇文章有幫助到不懂什麼是 iframe 的讀者,謝謝大家!



Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top