Youtube埋め込みの上下の要素を消す方法のメモ(非推奨)

非推奨だと思うので実行するべきではありませんが、実現しているサンプルを見た際に仕組みが分からず調査した結果をメモ的に残しておきたいと思います。

実現したいこと

• Yutubeをiframeで埋め込み、再生開始時に表示される上部の動画タイトルと下部のロゴなどを消して自動ループ再生する

参考

• YouTubeの埋め込み動画を自動再生かつループ再生させる │ Webty Staff Blog

上記記事内の「背景として使用する例」の箇所が該当箇所です。
動作サンプルにはタイトルが表示されませんが、記載されているパラメータ付きURLのサンプルコードを試すとタイトルが表示されてしまいます。

仕組みとサンプル

調べたところ以下のような仕組みで再現可能に思われました。

• Youtubeのiframeの高さを16:9よりも高くする
• Youtubeのiframeを包含する要素のアスペクト比を16:9にし、overflow: hidden;で上下を隠す
• この状態にすることで、隠れた部分に動画のタイトルやロゴが表示出力される状態となり、見える部分には出力されていないように見える

サンプルコード

<style>
  .youtube-wrap {
    position:relative;
    aspect-ratio: 16/9;
    overflow: hidden;
  }
  .youtube-wrap iframe {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1/1;
    border: none;
  }
</style>
<div class="youtube-wrap">
  <iframe src="https://www.youtube.com/embed/[videoのidを設定]?autoplay=1&mute=1&playsinline=1&loop=1&playlist=[videoのidを設定]&controls=0&disablekb=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title=""></iframe>
</div>

サンプルではiframeのアスペクト比を1/1にして上下に伸ばしています。

規約違反か否か

• YouTube埋め込みプレーヤーの関連動画やアレコレを非表示にしたいあなたに贈る処方箋💊 – Qiita

上記の記事の見解が分かりやすいように思われるためこちらを踏まえます。
その上で、以下のような状態となるため規約違反になると考えています。

• 動画は隠れていないが、iframeの上下は隠している
• タイトルやロゴを消すこと自体が問題なら、手法問わず消している時点で問題であることにかわりがない

結び

やはり以下のいずれかになると思います。

• Youtubeの規約に従い制限を受け入れる
• Youtubeを諦めてMP4や別の配信サービスなどで実装する