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 视频的一部分