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月時点)