youtube動画をレスポンシブで埋め込む場合

基本的にiframeを縦横比をアスペクト比に合わせたボックスで囲う、という形。
CSSでiframeのwidthとheightをボックスに合わせて100%にするので、問題ない。

<style>
.video_wrap {
	width: 100%;
	height: 56.25vw;
	position: relative;
}
.video_wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>
<div class="video_wrap">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/KBAyxbTZN5Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

カスタマイズとしてjavascriptで制御するパターン。
埋め込みたい動画のアスペクト比が2.39:1だかなんだかで、もともと動画の上下に黒帯がついていた。
それをなんとか切り捨てたいので工夫してみた。
参考サイト
techmemo.biz
やり方としては
・2.39:1のボックスを用意
・position:absoluteで16:9のボックスを中に作る（当然はみ出す）
・なので、上に2.39:1との高さの違いを2で割った高さ（黒帯の高さ）をネガティブマージンにする
・動画呼び出しのボックスの高さを16:9で設定する
最後のボックスの高さを16:9に合わせないと、youtubeの動画が自動で縮小されるぽいので。
問題は、これだと動画の再生が背景扱いになる（z-indexがマイナス）なので、一時停止や再生などができない。要検討。

.video_wrap {
	width: 100%;
	height: 42.55vw;
	position: relative;
}
.video_in {
	width: 100%;
	height: 56.25vw;
	position: absolute;
	margin-top: calc(-1 * (56.25vw - 42.55vw) / 2);
}
#video_content {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 56.25vw;
	z-index: -1;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// YouTube Player 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);
 
// プレイヤーを埋め込む場所(IDを指定)
var ytArea = 'video_content';
// 埋め込むYouTube動画のID
var ytID = 'Luf-oPvbIxk'; // https://youtu.be/〇〇〇の〇〇〇

// プレイヤーの埋め込み
function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(ytArea, {
    videoId: ytID,
    playerVars: {
      rel: 0, // 関連動画の非表示
      controls: 0, // プレイヤーコントロールの非表示
      showinfo: 0, // タイトルなどの非表示
      modestbranding: 1, // YouTubeロゴの非表示
      iv_load_policy: 3, // アノテーションの非表示
      wmode: 'transparent'
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
// 動画の準備完了後の動作
function onPlayerReady(e) {
  ytPlayer.playVideo();
  ytPlayer.setPlaybackQuality('default'); // 画質(small・medium・large・hd720・hd1080・highres・default)
}
// 動画再生中と再生後の動作
function onPlayerStateChange(e) {
  var ytStatus = e.target.getPlayerState();
  if (ytStatus == YT.PlayerState.PLAYING) { //再生中
  }
  if (ytStatus == YT.PlayerState.ENDED) { //再生後
    ytPlayer.playVideo();
  }
}

</script>
<div class="video_wrap">
	<div class="video_in">
		<div id="video_content"></div>
	</div>
</div>