Lite YouTube Embeds - 在您的網站上嵌入 YouTube 視頻的更好方法
已發表: 2022-02-26嵌入 YouTube 視頻很容易，但您會驚訝地發現，一個嵌入的 YouTube 視頻會給您的網頁增加多少額外的重量。 瀏覽器必須下載大約 800 kB 的數據（見屏幕截圖）才能單獨渲染 YouTube 視頻播放器。 這些文件甚至在訪問者單擊播放按鈕之前就已下載。
嵌入的 YouTube 視頻不僅會增加網頁的字節大小，而且瀏覽器必鬚髮出多個 HTTP 請求來呈現視頻播放器。 這會增加頁面的整體加載時間，從而影響頁面速度和網站的核心生命體徵得分。
默認 YouTube 嵌入代碼的另一個缺點是它呈現固定尺寸的視頻播放器並且沒有響應。 如果人們在手機上查看您的網站，視頻播放器可能無法針對小屏幕正確調整大小。
在不增加頁面大小的情況下嵌入 YouTube 視頻
現已不復存在的 Google+ 採用了一種非常巧妙的技術來嵌入 YouTube 視頻。 最初加載頁面時，Google+ 只會嵌入 YouTube 視頻的縮略圖，而實際的視頻播放器只有在用戶點擊縮略圖時才會加載。
YouTube 視頻的縮略圖幀圖像大小約為 15 kB，因此我們能夠將網頁大小減少近 1 MB。
精簡版 YouTube 嵌入演示
打開此演示頁面以查看 Google+ 技術的實際應用。 該頁面的第一個視頻使用默認的 IFRAME 代碼嵌入，而第二個視頻使用僅按需加載 YouTube 視頻的精簡模式。
當用戶單擊播放按鈕時，縮略圖將替換為標準 YouTube 視頻播放器，自動播放設置為 1，因此視頻幾乎可以立即播放。 最大的優勢是額外的 YouTube JavaScript 僅在有人決定觀看嵌入視頻時才會加載，否則不會加載。
輕量級響應式 YouTube 嵌入
YouTube 的標準嵌入代碼使用 IFRAME 標記，其中視頻播放器的寬度和高度是固定的，從而使播放器無響應。
YouTube 的新按需嵌入代碼具有響應性，可根據訪問者的屏幕尺寸自動調整播放器尺寸。
響應式嵌入 YouTube 視頻 - 教程
第 1 步：將以下 HTML 片段複製粘貼到您希望 YouTube 視頻出現的網頁中的任何位置。 請記住將VIDEO_ID替換為您的 YouTube 視頻的實際 ID。
< div class = " youtube-player " data-id = " VIDEO_ID " > </ div >我們不會分配高度和寬度，因為視頻播放器會在自動計算高度時自動佔據父級的寬度。 如果您需要在同一頁面上嵌入多個 YouTube 視頻，您還可以粘貼多個具有不同視頻 ID 的 DIV 塊。
第 2 步：將 JavaScript 複製粘貼到 Web 模板的任何位置。 該腳本在網頁上查找所有嵌入的視頻，然後將 DIV 元素替換為視頻縮略圖和播放按鈕（參見演示）。
< script > /* * Light YouTube Embeds by @labnol * Credit: https://www.labnol.org/ */ function labnolIframe ( div ) { var iframe = document . createElement ( 'iframe' ) ; iframe . setAttribute ( 'src' , 'https://www.youtube.com/embed/' + div . dataset . id + '?autoplay=1&rel=0' ) ; iframe . setAttribute ( 'frameborder' , '0' ) ; iframe . setAttribute ( 'allowfullscreen' , '1' ) ; iframe . setAttribute ( 'allow' , 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' ) ; div . parentNode . replaceChild ( iframe , div ) ; } function initYouTubeVideos ( ) { var playerElements = document . getElementsByClassName ( 'youtube-player' ) ; for ( var n = 0 ; n < playerElements . length ; n ++ ) { var videoId = playerElements [ n ] . dataset . id ; var div = document . createElement ( 'div' ) ; div . setAttribute ( 'data-id' , videoId ) ; var thumbNode = document . createElement ( 'img' ) ; thumbNode . src = '//i.ytimg.com/vi/ID/hqdefault.jpg' . replace ( 'ID' , videoId ) ; div . appendChild ( thumbNode ) ; var playButton = document . createElement ( 'div' ) ; playButton . setAttribute ( 'class' , 'play' ) ; div . appendChild ( playButton ) ; div . onclick = function ( ) { labnolIframe ( this ) ; } ; playerElements [ n ] . appendChild ( div ) ; } } document . addEventListener ( 'DOMContentLoaded' , initYouTubeVideos ) ; </ script >第 3 步：將 CSS 複製粘貼到 Web 模板的結束 head 標記之前。
< style > .youtube-player { position : relative ; padding-bottom : 56.25% ; height : 0 ; overflow : hidden ; max-width : 100% ; background : #000 ; margin : 5px ; } .youtube-player iframe { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; z-index : 100 ; background : transparent ; } .youtube-player img { object-fit : cover ; display : block ; left : 0 ; bottom : 0 ; margin : auto ; max-width : 100% ; width : 100% ; position : absolute ; right : 0 ; top : 0 ; border : none ; height : auto ; cursor : pointer ; -webkit-transition : 0.4s all ; -moz-transition : 0.4s all ; transition : 0.4s all ; } .youtube-player img:hover { -webkit-filter : brightness ( 75% ) ; } .youtube-player .play { height : 72px ; width : 72px ; left : 50% ; top : 50% ; margin-left : -36px ; margin-top : -36px ; position : absolute ; background : url ( '//i.imgur.com/TxzC70f.png' ) no-repeat ; cursor : pointer ; } </ style >您可以在此 Codepen 頁面上查看輕量級 YouTube 嵌入技術。
請注意，iPhone 和 Android 上的 Chrome 和 Safari 瀏覽器僅允許在用戶交互啟動時播放 HTML5 視頻。 它們阻止嵌入式媒體自動播放，以防止通過蜂窩網絡進行未經請求的下載。
YouTube 嵌入教程
- 嵌入靜音的 YouTube 視頻
- 將 YouTube 視頻作為您的網頁背景
- 僅嵌入 YouTube 視頻的一部分