이 라이브러리를 만들어야 할 필요성은 내가 사용하려고 할 때였습니다.
width="100%" 포함:

<iframe width="100%" src="https://www.youtube.com/embed/<video ID>" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

그러나 높이는 너비의 비율과 일치하지 않습니다.

그런 다음 withwidth: '100%'를 사용하려고 했습니다.

player = new YT.Player('<element ID>', {
    width: '100%',
    videoId: '<video ID>'
});

그러나 나는 또한 플레이어가 반응적이고 적응적인 레이아웃에서 잘 작동하도록 만들 수 없었습니다. 그러나 너비와 높이를 지정하지 않고 플레이어를 배치하면 플레이어가 비디오 원본 크기의 대략적인 비율에 따라 크기로 시작한다는 것을 알았고 이 정보를 사용하여 Element.clientWidth를 사용하여 너비와 높이를 가져오기로 결정했습니다. Element.clientHeight 다음과 같은 상황에서 간단한 계산을 적용했습니다.

onReady (유튜브 API)

onresize

setTimeout (300ms)

간단한 계산:

if (originalWidth != originalHeight) 
    element.height = currentWidth / (originalWidth / originalHeight);
} else 
    element.height = currentWidth;
}

부분적으로 해결된 문제입니다. 그러나 History API(Vue.js, Angular 등과 같은)와 함께 XMLHttpRequest를 사용하여 페이징하는 것과 같이 "요구"에 따라 특정 항목을 로드하는 시스템이 있습니다. 이를 해결하기 위한 최상의 옵션은 MutationObserver API와 같았습니다. { childList: true } .

그래서 이 문제를 해결하기 위해 하나 이상의 요구 사항이 발생함에 따라 라이브러리로 전환하여 공유하는 것이 더 낫다고 결정했습니다.

라이브러리는 3,15KB(최소화) 및 웹 서버에서 gzip으로 압축될 때 1,55KB(예: ngx_http_gzip_module 또는 mod_deflate )를 갖습니다.

구성

릴리스에서 다운로드하여 페이지에 넣을 수 있습니다.

<script src="responsive-youtube.min.js"></script>

또는 CDN을 사용하십시오.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/responsive-youtube.min.js"></script>

npm 사용:

npm i responsive-youtube.js

다음을 사용하여 가져옵니다.

const SimpleCopy = require('responsive-youtube.js');

ECMAScript 모듈 사용:

import SimpleCopy from 'responsive-youtube.js'

페이지에 플레이어 추가

간단한 예:

<!-- embed video in page -->
<div data-ry-video="Tdjk9dhT_AU"></div>

<!-- embed video in page without "responsive" -->
<div data-ry-video="5ABos9UTfJU" data-ry-ignore="true"></div>

<script src="responsive-youtube.js"></script>
<script>
ResponsiveYoutube.start();
</script>

예

브라우저 지원

✔
✔
✔
✔
6+ ✔
10+ ✔