Lite YouTube Embeds - 웹사이트에 YouTube 동영상을 삽입하는 더 나은 방법

게시 됨: 2022-02-26

YouTube 비디오를 포함하는 것은 쉽지만 단일 YouTube 비디오 포함이 웹 페이지에 얼마나 많은 추가 무게를 추가할 수 있는지 알면 놀랄 것입니다. 브라우저는 YouTube 비디오 플레이어만 렌더링하기 위해 ~800kB의 데이터(스크린샷 참조)를 다운로드해야 합니다. 그리고 방문자가 재생 버튼을 클릭하기 전에도 이러한 파일이 다운로드됩니다.

Embed YouTube Video Player Size

포함된 YouTube 비디오는 웹 페이지의 바이트 크기를 증가시킬 뿐만 아니라 브라우저가 비디오 플레이어를 렌더링하기 위해 여러 HTTP 요청을 해야 합니다. 이는 페이지의 전체 로딩 시간을 증가시켜 페이지 속도와 웹사이트의 핵심 vitals 점수에 영향을 미칩니다.

기본 YouTube 내장 코드의 또 다른 단점은 고정된 크기의 비디오 플레이어를 렌더링하고 반응하지 않는다는 것입니다. 사람들이 휴대전화에서 귀하의 웹사이트를 보는 경우 비디오 플레이어의 크기가 작은 화면에 맞게 적절하게 조정되지 않을 수 있습니다.

페이지 크기를 늘리지 않고 YouTube 동영상 삽입

지금은 없어진 Google+는 YouTube 동영상을 삽입하기 위해 매우 영리한 기술을 사용했습니다. 페이지가 처음 로드되었을 때 Google+는 YouTube 동영상의 썸네일 이미지만 포함하고 실제 동영상 플레이어는 사용자가 썸네일 내부를 클릭했을 때만 로드되었습니다.

YouTube 동영상의 썸네일 프레임 이미지는 크기가 약 15kB이므로 웹 페이지 크기를 거의 MB로 줄일 수 있습니다.

라이트 YouTube 포함 데모

이 데모 페이지를 열어 Google+ 기술이 실제로 작동하는지 확인하세요. 페이지의 첫 번째 동영상은 기본 IFRAME 코드를 사용하여 삽입되는 반면 두 번째 동영상은 요청 시 YouTube 동영상을 로드하는 라이트 모드를 사용합니다.

사용자가 재생 버튼을 클릭하면 썸네일 이미지가 자동 재생이 1로 설정된 표준 YouTube 동영상 플레이어로 대체되어 동영상이 거의 즉시 재생됩니다. 큰 장점은 누군가가 포함된 비디오를 보기로 결정한 경우에만 추가 YouTube JavaScript가 로드되고 그렇지 않은 경우에는 로드되지 않는다는 것입니다.

가볍고 반응이 빠른 YouTube 삽입

YouTube의 표준 삽입 코드는 동영상 플레이어의 너비와 높이가 고정되어 플레이어가 응답하지 않는 IFRAME 태그를 사용합니다.

새로운 YouTube용 주문형 삽입 코드는 방문자의 화면 크기에 따라 플레이어 크기를 자동으로 조정하는 반응형입니다.

YouTube Embed Code

반응형으로 YouTube 동영상 포함 - 자습서

1단계: YouTube 비디오를 표시할 웹 페이지의 아무 곳에나 다음 HTML 스니펫을 복사하여 붙여넣습니다. VIDEO_ID 를 YouTube 동영상의 실제 ID로 바꿔야 합니다.

 < div class = " youtube-player " data-id = " VIDEO_ID " > </ div >

높이가 자동 계산되는 동안 비디오 플레이어가 자동으로 부모의 너비를 차지하므로 높이와 너비를 할당하지 않습니다. 동일한 페이지에 여러 YouTube 동영상을 포함해야 하는 경우 동영상 ID가 다른 여러 DIV 블록을 붙여넣을 수도 있습니다.

2단계: 웹 템플릿의 아무 곳에나 JavaScript를 복사하여 붙여넣습니다. 스크립트는 웹 페이지에 포함된 모든 비디오를 찾은 다음 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단계: 웹 템플릿의 닫는 head 태그 앞에 CSS를 복사하여 붙여넣습니다.

 < 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 삽입 자습서

  1. 음소거된 YouTube 동영상 포함
  2. YouTube 비디오를 웹페이지 배경으로 배치
  3. YouTube 동영상의 일부만 삽입