天矽科技 line

天矽部落格最新的網路趨勢資訊

網站設計趨勢

如何將YouTube影片嵌入網頁?嵌入教學與常見問題|天矽科技網頁設計

部落格:如何將YouTube影片嵌入網頁?嵌入教學與常見問題|天矽科技網頁設計

 

目錄
YouTube影片嵌入網頁
YouTube嵌入問題

 

將YouTube影片嵌入網頁中,是目前最廣泛的分享方式,其嵌入方式並不困難,只要複製語法貼到編輯器中即可嵌入網站中。

 

 在網站上撰寫文章時,有時候會想要另外附上影片,提供更多元化的註解與分享,而最多人使用、最多樣影片的影音平台就是 YouTube,因此要怎麼將 YouTube 的影片嵌入到網頁呢?

 

Step1. 開啟影片網址點分享

開啟影片網址點分享

 

Step2. 點擊嵌入

嵌入影片

 

Step3. 設定影片

設定影片

 

 這裡可以設定影片要從什麼時候開始,如果有需要則可在「開始處」設定開始的時間,那麼使用者點擊影片播放時,就會從你設定的開始時間開始播放;而下方的嵌入選項中,我們也可以選擇是否要開啟「顯示播放器控制選項」及「啟用隱私權加強保護模式」。

 另外,如果想要調整影片的高度與寬度則可在語法中的 width 與 height 設定調整,你可以設定你想要的長寬尺寸,也可以百分比的方式做設定,如「width="560" height="315"」或「width="100%" height="100%"」。

設定寬高

勾選需求

 

※ YouTube說明|啟用隱私權加強保護模式
 啟用後,系統就不會利用嵌入的YouTube內容的觀看活動資料來影響觀眾在YouTube上的瀏覽體驗,也就是說系統不會使用該影片的觀看活動資料來提供個人化的YouTube瀏覽體驗;當影片在隱私加強保護模式下顯示時,若系統在影片上放送廣告,廣告也同樣不屬於個人化廣告。

更多詳細資料請參考:YouTube說明

 

Step4. 複製語法貼到編輯器

 將語法複製後,到網站後台的編輯器中,找到「原始碼」開關並將語法貼入其中,如果找不到原始碼的按鈕,可以找看看有沒有像這樣</>的符號?如果是使用WordPress則可在左側功能中的WIDGETS項目找到「自訂HTML」。

複製語法

開啟程式碼

▲ 開啟程式碼

 

痞客幫嵌入

▲痞客幫程式碼開關

 

wordpress嵌入

▲ WordPress程式碼

 

Step5. 儲存後回到前台

前台預覽畫面

 

 將「原始碼」開關切換回來時,我們就能預覽影片嵌入網頁中的樣子。這時只要點選儲存文章再切回前台,就能看到剛剛嵌入的影片囉!像這樣:

 

 

 一般人將YouTube嵌入網頁文章中,會發生的問題不外乎就是影片無法嵌入、播放的問題,其原因大多都是影片變成私人或是對方不開放嵌入的狀況,因此若要嵌入影片到網頁中,最好是使用自己頻道中的影片才不會發生這些狀況。

相關問題
代碼複製錯誤
嵌入影片無法播放
關閉YouTube影片嵌入功能
YouTube嵌入網站的觀看次數

 

代碼複製錯誤

 點擊分享後,一開始出現的網址並非嵌入代碼,所以複製那串網址貼到編輯器中,只是將連結複製過去而已,並不是「嵌入」喔!

代碼複製錯誤

 

嵌入影片無法播放

 不是每一支影片都可以讓我們做嵌入,有些YouTube創作者會將嵌入功能關閉,不讓別人在外部網站嵌入他上傳的影片,此時的分享雖然還是可以找到嵌入語法,但旁邊的畫面就會出現「無法播放影片」的黑色畫面喔!

 另外,如果影片原本為公開影片,但後來被創作者將權限更改為「私人」,這樣就沒有辦法在網頁中正常顯示。

影片無法嵌入

 

關閉YouTube影片嵌入功能

 YouTube創作者是如何關閉影片嵌入的功能?
 

  1. 第一步:進入YouTube工作室
    開啟工作室
     
  2. 第二步:進入左側內容選項
  3. 第三步:找到影片並點選詳細資料
    影片詳細資訊
     
  4. 第四步:在影片詳細資料中開啟顯示更多並「關閉允許嵌入
    關閉允許嵌入選項

 

 照著以上步驟就可以關閉影片的嵌入功能囉!
 YouTube創作者會關閉這項功能的原因,可能是不希望影片被別人盜用,也有很大的原因是不想要讓「影片觀看次數」外流,因為嵌入在網頁中的影片是無法被計入觀看次數的。

 

YouTube嵌入網站的觀看次數

 經過實測,嵌入網站的YouTube影片觀看次數是不會被計算的。

 YouTube不會計算「被嵌入在網頁」或「使用影片自動播放」的觀看次數,因為系統會認為此觀看者是機器人而停止計入觀看次數。

 

延伸閱讀:
【懶人包】FB、IG貼文嵌入網頁文章

 

 

回上一頁
信箱
客服
Line@