【筆記】Iframe 內嵌Youtube影片的方式- SpicyBoyd 部落格

複數參數的用 & 串連; autoplay 自動播放： autoplay=1 ，反之則不自動播放(default)： autoplay=0; loop 無限循環播放： loop=1 ，反之則播放 ... AuthorDescription 記錄著平時寫程式用到的一些技巧，還有學習程式的筆記，若有誤歡迎各位指正。

此外，還有一些平時生活的隨筆、札記和心得，也歡迎有興趣的同好一起討論。

AuthorSocialLinks 站長留言 ✅已優化本站載入速度，提升使用者體驗，詳情請參考公告 ✅固定於每周一至周五更新Blogger文章，並於週六、日會有短篇 ✅有任何意見、想法，歡迎留言給Spicy知道喔 FrontendhtmliframeNoteWebDesignYoutube 【筆記】Iframe內嵌Youtube影片的方式 SpicyBoyd tags:WebDesignHTML 屬性 width、height寬高：width="640" src影片位址：src="https://www.youtube.com/embed/影片id" 原本影片位址：https://www.youtube.com/watch?v=影片id data-thumbnail-src影片縮圖位址：參考小技巧2-Blogger frameborder邊框：frameborder="0" allowfullscreen是否全螢幕：allowfullscreen寫這樣即可 參數 複數參數的用&串連 autoplay自動播放：autoplay=1，反之則不自動播放(default)：autoplay=0 loop無限循環播放：loop=1，反之則播放一次(default)：loop=0 control底下控制區(default)：controls=1，反之不顯示控制區：controls=0 start/end：開始時間、結束時間，以秒為單位，e.g.start=111 rel影片結束時顯示相關影片(default)：rel=1，反之不顯示相關影片：rel=0 playlist自訂播放清單：後面要播放的影片用逗號,分開，e.g.playlist=影片id1,影片id2 程式碼範例 範例結果呈現 小技巧1-Youtube 直接到Youtube，利用youtube寫好的程式碼 步驟1：到youtube影片右下方，選擇分享 步驟2：選擇“嵌入” 步驟3：複製全部的程式碼，貼到需要使用的地方 程式碼： 小技巧2-Blogger 直接到blogger，利用blogger自動生成的程式碼 步驟1：選擇插入影片 步驟2：貼上youtube影片網址 步驟3：點選左上角的HTML，就能看到自動寫好的程式碼 步驟4：複製全部的程式碼，貼到需要使用的地方 程式碼：
Reference參考資料 w3schools：https://www.w3schools.com/html/html_youtube.asp 官方文件：https://developers.google.com/youtube/player_parameters Tags:Frontend ,html ,iframe ,Note ,WebDesign ,Youtube facebook twitter line 複製連結 SpicyBoyd 沒有留言: 張貼留言 較新的文章 較舊的文章 首頁 訂閱： 張貼留言(Atom) 站內搜尋 文章分類 Note (34) 軍旅 (25) APP (23) Java (20) Drama (18) JavaScript (17) Linux (15) Travel (14) 心得 (13) DevOps (6) 評論 (3) book (2) 小技巧 (2) 熱門文章 【UML】ClassDiagram類別圖(下)：Relationships關係 tags:UMLClassDiagramCommon先修知識【UML】ClassDiagram類別圖(上)：Introduction簡介Relationships關係Instance-level物件層級Dependency依賴... 【APP/Android】onClick事件的5種實現方式 tags:APPAndroidCommon推薦的實現方式：方法1、方法3並不是只有才會有onClick的屬性及需要，其他元件也有這個屬性，例如：,