가벼운 방법으로 YouTube 및 Vimeo를 삽입하는 방법

표준<iframe> -embed-code를 사용하여 YouTube 및 Vimeo 비디오를 수십 번 포함했을 것입니다.

이것은 기본적으로 훌륭하게 작동하지만 Youtube와 같은 서비스는 사용자가 포함된 비디오를 클릭하지 않더라도 많은 Javascript를 로드합니다.

내장된 3개의 YouTube 동영상으로 테스트를 수행했습니다. 이 경우 1MB 이상의 추가 데이터가 로드되었습니다.

그것은 많은 불필요한 대역폭입니다. 우리는 더 잘할 수 있습니다!

라이트 로더

또는 와 같은 많은 "라이트 로더"가 있습니다.

바쁘다면 이것들 중 npm install 하나만 주세요.

그렇지 않으면 잠시만 기다려 주세요. 더 가벼울 수 있습니다!

수동 방식

YouTube 또는 Vimeo가 로드되는 것을 방지하고 싶기 때문에 수동으로 비디오의 썸네일 이미지를 추가합니다.

YouTube에는 이미지 서비스ytimg.com가 있습니다.

<img loading="lazy" src="https://i.ytimg.com/vi/[VIDEOID]/hqdefault.jpg">

여기서 중요한 부분은 [VIDEOID]입니다. 이것을 실제 ID로 바꾸십시오.


Vimeo에는 이와 같은 서비스가 없지만 (현재 무료) Vumbnail -service를 사용할 수 있습니다.

<img loading="lazy" src="vumbnail.com/[VIDEOID].jpg">

Vumbnail은 id/src에서 비디오 제공자를 자동으로 감지합니다.

시원한! 이제 이미지 주변에 래퍼를 추가하고 더미<iframe>와 플레이<button>도 추가하겠습니다.

<youtube-embed>
  <img loading="lazy" src="https://i.ytimg.com/vi/[VIDEOID]/hqdefault.jpg" alt="Video Description">
  <iframe allow="autoplay" src="" data-src="https://www.youtube.com/embed/[VIDEOID]?autoplay=1"></iframe>
  <button aria-label="Play video"></button>
</youtube-embed>

맞춤 요소일 필요는 없으며, 좀 더 읽기 쉽고 Vimeo 비디오에 <vimeo-embed>를 사용할 수 있습니다.

스타일링

스타일 지정을 위해 class 'es 대신 사용자 정의 요소 태그를 직접 사용할 것입니다.

:is(vimeo-embed, youtube-embed) {
  aspect-ratio: 16 / 9;
  border-radius: var(--video-embed-bdrs, 0.25em);
  display: grid;
  inline-size: 100%;
  position: relative;
}
:is(vimeo-embed, youtube-embed) :is(iframe, img) { 
  block-size: 100%;
  border: 0;
  border-radius: inherit;
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
}

재생 버튼의 경우 CSS 사용자 지정 속성을 추가하여 색상 등을 쉽게 변경할 수 있습니다.

:is(vimeo-embed, youtube-embed) button {
  background-color: var(--button-bgc, #F00);
  block-size: var(--button-h, 50px);
  border: 0;
  border-radius: var(--button-bdrs, 14%);
  display: grid;
  inline-size: var(--button-w, 75px);
  opacity: var(--button-op, 0.8);
  position: absolute;
  place-self: center;
  transition: all .2s ease-in;
}
:is(vimeo-embed, youtube-embed) button::before {
  aspect-ratio: 1;
  background: #FFF;
  block-size: 1.5em;
  clip-path: polygon(20% 0%, 20% 100%, 100% 50%);
  content: '';
  place-self: center;
}

vimeo-embed button { --button-bgc: #00adef; }

<iframe>가 로드될 때 재생 버튼을 숨기려면 src -attribute에 빈 문자열이 아닌 다른 항목이 포함되어 있는지 확인합니다.

:is(vimeo-embed, youtube-embed) iframe:not([src=""]) + button {
  display: none;
}

이제 실제 <iframe>를 로드하려면 src를 data-src로 바꾸기만 하면 됩니다.

document.querySelectorAll(':is(vimeo-embed, youtube-embed) button').forEach(button => button.addEventListener('click', () => {
  const video = button.previousElementSibling;
  video.src = video.dataset.src;
}))

그리고 그게 다야! 우리는 1메가바이트의 데이터를 몇 바이트로 대체했습니다.

다음은 짧은 면책 조항이 있는 Codepen 데모입니다. 비디오는 Codepen-iframe에서 직접 자동 재생되지 않지만 자신의 사이트에서 재생됩니다.

자바스크립트 방식

모든 마크업을 처리하지 않으려면 다음과 같은 간단한 방법을 사용할 수 있습니다.

<youtube-embed id="5b4YcLB4DVI" title="Text">
<vimeo-embed id="70591644" title="Text">

비디오의 id와 썸네일 title 속성에 대한 alt만 있으면 됩니다. 그런 다음 JavaScript에서 <img> 및 <button> -요소를 만들 수 있습니다.

document.querySelectorAll('vimeo-embed, youtube-embed').forEach(v => {
  const [poster, src] = v.tagName === 'VIMEO-EMBED' ?
    [`vumbnail.com/${v.id}.jpg`, 'player.vimeo.com/video'] :
    [`i.ytimg.com/vi/${v.id}/hqdefault.jpg`, 'www.youtube.com/embed'];

  v.innerHTML = `<img loading="lazy" src="https://${poster}" alt="${v.title}"><button aria-label="Play"></button>`;
  v.children[1].addEventListener('click', () => v.innerHTML = `<iframe allow="autoplay" src="https://${src}/${v.id}?autoplay=1"></iframe>`)
})

335바이트가 gzip으로 압축되었으므로 성능 예산이 중단되지 않습니다.

즐거운 코딩하세요!