YouTubeをbackground-size:coverっぽく表示させる方法(YouTube API + jQuery)

要素に背景画像を置くとき、幅or高さの長いほうに合わせて画像を引き伸ばすには background-color: cover;
というCSSを使います。(最近だと object-fit:cover;
も有効です)
今回は、これと同じような見せ方をYouTubeの埋め込みで再現してみます。
デモ
HTML
<div class="youtube-cover">
<div id="youtube"></div>
</div>
CSS
.youtube-cover{
position: relative;
overflow: hidden;
width: 40vw;
height: 40vw;
margin: 0 auto;
}
.youtube-cover iframe{
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
JS
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script>
// YouTube APIの読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubeIframeAPIReady = function () {
YT.ready(function(){
var ytPlayer2 = new YT.Player('youtube', {
videoId: 'X-dMOvEOQiM',
playerVars: {
'controls': 0,
'showinfo': 0,
'rel': 0,
'playsinline': 1
},
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
youtube_coverResize('.youtube-cover');
})
}
//イベント関数
function onPlayerReady (event) {
event.target.mute()
event.target.playVideo()
}
function onPlayerStateChange (event) {
if (event.data === YT.PlayerState.ENDED) {
event.target.playVideo()
}
}
// background-size:coverっぽくリサイズ
function youtube_coverResize(target){
var winW = $(target).outerWidth();
var winH = $(target).outerHeight();
var screen_switch = 9 / 16;
var screen_ratio = winH / winW;
var ratioH = winH / screen_switch;
var ratioW = winW * screen_switch;
if(screen_ratio >= screen_switch){
$(target).find('iframe').css({
'height':'100%',
'width':ratioH,
'margin-top':'0',
'margin-left': -ratioH /2,
'left':'50%',
'top':'0'
});
} else {
$(target).find('iframe').css({
'width':'100%',
'height':ratioW,
'margin-top': -ratioW / 2,
'margin-left':'0',
'top':'50%',
'left':'0'
});
}
}
$(window).resize(function () {
youtube_coverResize('.youtube-cover');
});
</script>
補足
- 読み込み直後に表示される動画タイトルや、一時停止時に表示される関連動画は非表示にはできません(2023年3月時点)