Youtube Iframe API 常用功能- Google - Let's Write

Youtube iframe API 最基本的使用，就是嵌入影片了。

... function 會自動帶一個參數，這邊用小寫 e ，實際上你想叫什麼都行，也可以寫成 event ，或 ... 跳至主要內容YoutubeIframeAPI常用功能2021-08-282019-11-23/Augustus本篇大綱影片愈來愈重要的這時代，前端會遇到嵌Youtube的相關需求基本使用：嵌入影片+自動播放1HTML中放一個div，由JavaScript去嵌入2HTML裡直接放個iframe自製Youtube播放器監聽Youtube播放狀態Demo、原始碼影片愈來愈重要的這時代，前端會遇到嵌Youtube的相關需求最近做的幾個案子，頁面上很常會要嵌入Youtube，比方一些形象的宣傳影片、一些看起來很感人但其實是廣告的影片（咦？）。

大部份遇到這需求，都是直接用Youtube本來就有提供的iframe來解決，但有些時候會需要用到API，像是當企劃說：「我想要滑到出現影片這塊時，影片就自動播放。

」、「當影片播放時，幫我埋個GA事件。

」…etc。

這時如果只會基本的iframe，是不夠的。

而且為了節省流量，公司又沒有串流功能時，影片很少很少會放自己的主機，大部份都是放Youtube上，這些情況就需要用到Youtube提供的iframeAPI。

本篇要筆記的就是YoutubeiframeAPI的一些常用功能，比方嵌入、自動播放、監聽影片狀態、做一個自己的控制器等。

再配合之前寫過的二篇，就可以滿足上面企劃提的例子了：滑到影片出現時自動播放，可用IntersectionObserver配合。

發送GA事件，先了解GA事件要傳送哪三個值。

基本使用：嵌入影片+自動播放YoutubeiframeAPI最基本的使用，就是嵌入影片了。

API中嵌入影片有二種方式：HTML中放一個div，由JavaScript去嵌入HTML裡直接放個iframe這兩種方式不論哪一種，都可以直接在嵌入完成後，自動播放影片。

這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝要注意的是，瀏覽器的政策是不能干擾使用者的瀏覽，所以如果想要自動播放影片，影片就必須要是靜音，這樣自動播放時，使用者也不會因為突然出現的聲音而被嚇到。

以下的HTML，UI用了Bootstrap，因此會看見出現Bootstrap的classname。

另外本筆記所有Demo，會統一整理在一個頁面上，網址連結附在最後一段。

1HTML中放一個div，由JavaScript去嵌入程式碼如下：可以看到，HTML就是放一個，再由JavaScript呼API去指定player這個id的div去嵌入影片。

因為Bootstrap的CSS會讓iframe有響應式，因此iframe的寬高就寫預設值的640*390就行。

videoId就是要嵌入的Youtube影片id。

影片id可以從網址上找到，我們一般看到的Youtube網址是這樣：https://www.youtube.com/watch?v=KuhIY-AUG6c影片id就是v=後面的那一串，像這個例子就是KuhIY-AUG6c。

順帶一提，這部影片的泱泱好可愛~API中跟一般嵌入Youtube最大的不同，就是有一個callback，可以在影片嵌入完就緒時，執行一個function，就是程式碼中的這段：這是廣告，點擊一下可以幫本站多個一點點的廣告收入，謝謝events:{ 'onReady':onPlayerReady }當影片ready的時候，就執行onPlayerReady這個function。

onPlayerReady寫的內容是這樣：functiononPlayerReady(e){ e.target.mute().playVideo(); }function會自動帶一個參數，這邊用小寫e，實際上你想叫什麼都行，也可以寫成event，或是你家小狗的英文名字，一般我們會用event或是偷懶用小寫e。

e.target就是這個Youtube本身，mute()是讓它靜音，playVideo()就是播放影片。

2HTML裡直接放個iframe直接放個iframe的方式，跟我們一般複製貼上Youtube給的嵌入碼很像，但還是有小地方不一樣：在iframesrc的部份，最後要帶一個參數：enablejsapi=1origin＝"嵌入Youtube的網域"這個則是選填，如果有填，那嵌入Youtube的網域，就要是你寫在origin後面的那個網域。

比方如果這邊寫了origin=https://letswrite.tw，那這一段程式碼就只能在本站中執行YoutubeiframeAPI，如果不是在本站，就會報錯。

JavaScript的部份跟前一種方式是一樣的，但因為寬高可以寫在iframe上，因此呼API這段可以不必寫寬高。

HTML上，iframe的id還是要有，API在呼的時候不管是1、2哪種方式，都要寫上id。

自製Youtube播放器這段來筆記自製播放器的部份，最後會完成的樣子如下：自製播放器Demo可以看到，泱泱好可愛~~啊不是，是這邊的Demo上總共接了API提供的幾項功能：播放、暫停、停止後退10秒、前進10秒（秒數可以自己設定）播放速度，捲軸的值是：0.25/0.5/0.75/1/1.25/1.5/1.75/2音量：0–100是否靜音這些API文件上都有寫，不過散在各段中，覺得未來總會有遇到以上需求的時候，這邊就把這幾項功能整理在一起，程式碼如下：每個功能按鈕都給一個id，這個按鈕就監聽click事件，捲軸的話就是監聽input事件，聽到事件後的callback，都是寫在onPlayerReady的function中。

需要說明的是後退、前進幾秒這個，這邊Youtube並沒有直接給一個往前/往後的功能，但有給了兩個API：抓目前播放到幾秒、讓影片直接跳到幾秒。

因此所謂的後退、前進功能，其實就是按了按鈕後，先抓目前影片播放的秒數，接著讓影片跳到目前秒數+10或-10的地方。

加多少或減多少可以自行修改。

其它的功能程式碼裡面都有寫上註解了，可以直接看註解說明。

監聽Youtube播放狀態Youtube的影片我們可以用API來知道目前是：準備好的、初次載入的、播放的、暫停的、播完的、緩衝中，這六種狀態。

可以看到，在原本'onReady':onPlayerReady下面多加了一個callback：'onStateChange':onPlayerStateChangeonPlayerStateChange這個function一樣會帶上一個參數，這邊取名為小寫e。

小寫e一樣指的是這個Youtube這個影片本身，但會另外多帶另一個data出來，console.log的話會看到以下：onPlayerStateChange的console這個data就是影片的狀態碼，總共有-1、0、1、2、3、5這六個數字，對應的狀態如下：-1：unstarted未啟動，初次載入0：ended結束1：playing播放中2：paused暫停3：buffering緩衝中5：videocued準備好可以播放了當頁面嵌入的Youtube，這個影片準備就緒時，用e.target.getPlayerState()會得到5這個狀態。

當你按下播放，這時影片會開始載入，狀態會回傳-1，這段就是當我們按下播放，會看到Youtube一開始出現的轉圈圈那段。

當Youtube開始播影片，狀態碼是1。

按下暫停是2。

如果網路太慢需要緩衝又在那轉圈圈時是3。

影片整個播完了是0。

我們可以針對不同的狀態，發送不同的GA事件，就可以大概統計有多少人點了影片播放，又有多少人有看完。

Demo、原始碼Demo跟原始碼的部份都有整理在GitHub上。

Demo：https://letswritetw.github.io/letswrite-youtube-iframe-api/原始碼：https://github.com/letswritetw/letswrite-youtube-iframe-api本篇參考資源主是YoutubeIframePlayerAPI的文件：YouTubePlayerAPIReferenceforiframeEmbeds收藏此筆記：FacebookTwitterTelegramPocket電子郵件列印SummaryArticleNameYoutubeIframeAPI常用功能Description本篇大綱：影片愈來愈重要的這時代，前端會遇到嵌Youtube的相關需求。

基本使用：嵌入影片+自動播放。

1HTML中放一個div，由JS去嵌入。

2HTML裡直接放個iframe。

自製Youtube播放器。

監聽Youtube播放狀態。

Demo、原始碼。

AugustusAugustusLet'sWriteLet'sWritehttps://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg隨選筆記文WordPressWordPress基本介紹外掛,權限FormsGoogleGoogle表單，提交後系統自動寄送回覆通知emailHTML,JavaScriptGoogleOthersGoogleMaterialDesign表單標籤效果CodePen,CSS,JavaScriptBotTelegramTelegramLoginWidget，製作用Telegram登入功能LoginPWAPWA學習筆記-6：實際使用整體流程範例Cache,Manifest,WordPressBotTelegramTelegramBot學習筆記–2：用GoogleAppsScript接收/推播訊息AJAX,Webhook,資料APIGitHubAPI：建立Issue、Comment–GitHubAppFirebase,GitHub,Issue,Login,TokenFormsGoogleGoogle表單用網址改變題目預設值Data,網址GoogleOthersGoogleTopHeavy演算法使用者,廣告,演算法Front-EndTestCafe學習筆記–1：自動化測試會員登入Async,Node.js,Notify,TestCafe,測試以下是留言，但關於留言的部份必需先讓你們知道：本站的文章都是Augustus因為覺得有趣，才會實作並整理成筆記文而後進行發表。

如果留言是希望把Demo改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子，Sorry~除非那修改是Augustus也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。

😎另外，公開信箱是為了讓金流驗證用，因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。

因此決定不再回覆信件，有疑問就利用留言功能囉。

訂閱通知通知新留言通知所有新留言Label{}[+]Name*Email*Label{}[+]Name*Email*0CommentsInlineFeedbacks看所有留言搜尋關鍵字:Translate简体中文繁體中文English日本語最新文章FirebaseRealtimeDatabase常用功能筆記FirebaseAuthentication第三方登入–GitHubFirebaseAuthentication第三方登入–Google、FB用JavaScript監聽頁面/頁籤被關閉的事件如何用GoogleSheets/Excel當作資料庫2種快速安裝、使用TailwindCSS的方式如何用NetlifyCMS製作電子報生成器幾個方便開發的ConsoleAPI應用大家都在看WebSocket基本介紹及使用筆記Google表單，提交後系統自動寄送回覆通知emailVue.js3CompositionAPI基本學習筆記-1：Ref、Props、watch、生命週期Google表單，輸入ID後自動帶入其它欄位資料Word、Excel合併列印功能使用筆記OSM+Leaflet學習筆記1：建地圖、marker、事件、換圖層MacBook用隨身碟執行Windows10：WindowsToGo、WinToUSBLIFFv2基本使用筆記及範例請作者一杯咖啡？寫文章需要咖啡提神，回答問題需要時間及心力。

如果覺得本站文章對工作有幫助、技術有進步，或是問題有得到解答，歡迎請本站喝杯咖啡。

中杯60元、大杯90元，加碼特大杯120元。

你請的每一杯咖啡，對本站來說都是莫大鼓勵:)請喝咖啡（台灣）Buymeacoffee（Foreign）He**y小*瓜ki*******37A**yS**Y**C**R****_L**I**nM******C**uR***y曾*M**L**O近期留言「Augustus」在〈用LINEBotAPI建立LINE@圖文選單〉發佈留言「ting」在〈用LINEBotAPI建立LINE@圖文選單〉發佈留言「Vic」在〈Google表單，提交後系統自動寄送回覆通知email〉發佈留言「路人甲」在〈Instagram基本顯示API：抓取公開IG資料、相片、影片〉發佈留言「Mia」在〈2種快速安裝、使用TailwindCSS的方式〉發佈留言「胡丁丁」在〈Google表單，輸入ID後自動帶入其它欄位資料〉發佈留言「ans9323052」在〈用原生JavaScript做一個簡單的抽獎功能頁面〉發佈留言「tony」在〈VueTransitions製作簡單的Carousel/Slider/輪播功能〉發佈留言放個廣告賺點養主機的$$，謝謝Let’sWrite來訪人數位大大相挺，謝謝。

（如何製作來訪人數？）訂閱新文章通知直接加入Telegram的頻道，有最新文章時會收到廣播通知：DMCAProtection放個廣告賺點養主機的$$，謝謝Let'sWrite前端工程師Augustus的學習筆記—solvingproblems,insimpleways.APIFront-EndGoogleBotVuePWAWordPressFollowusFBTelegramGitHubIGTwitter網站地圖隱私權政策[email protected]（金流驗證用）請喝咖啡（台灣）Buymeacoffee（Foreign）wpDiscuzInsert傳送到電子郵件地址你的姓名你的電子郵件地址取消文章未送出─請檢查你的電子郵件地址！電子郵件地址檢查失敗，請再試一次抱歉，你的網誌無法透過電子郵件分享