YouTube iframeビデオを100％全幅で埋め込む方法

YouTubeのiframeや16：9の動画（Twitchライブウィジェット、Vimeoなど）を埋め込む方法を知りたいと思っている人がいるかもしれません。

YouTubeでは通常、固定サイズの動画width="560"height="315"を提供しています。しかし、通常、見栄えが良く応答性もよいように、全幅で埋め込むことが望まれます。

しかし、それを100vwに設定すると、コンテナーから出てサイトが台無しになるだけで、高さも決定できません。

そのため、iframeはそのコンテナに応じて100％の幅にする必要があります。これは、width="100%"を追加するだけで実行できます。ただし、高さはめちゃくちゃになっており、100％に設定しても機能しません。

そしてそれは、視聴者が画面サイズを変更するときに機能する必要があり、電話を垂直から水平に移動するか、ウィンドウを最大化します。

2020/02/11Anthony Kung

そこで、JavaScriptを使用して思いついた解決策を次に示します。ここでの問題は、幅がわからなければ高さを決定できないことです。幅は動的であるため、高さをハードコーディングすることはできません。

JavaScriptを使用して要素の幅を取得できます。これにより、標準ビデオのアスペクト比16：9を使用して高さを計算できます。もちろん、アスペクト比を別のものに変更できますが、通常、YouTubeビデオには16：9のアスペクト比が付属しています。

このコードは、コンテナに応じてiframeを全幅にします。つまり、本文が100pxでコンテナーが80pxの場合、iframeがコンテナー内にある場合、幅は80pxになります。コンテナから出ることはなく、レスポンシブデザインを台無しにすることはありません。

このコードは、ページがロードまたはサイズ変更されるたびにiframeのサイズを変更し、常に16：9のアスペクト比を維持するようにします。ほとんどの人々はそれを見るのに電話を使用しているかもしれません、そして、電話が垂直から水平に動くことが重要であるかもしれないとき、それがリサイズされることを確認してください。

方法は次のとおりです。

window.addEventListener("load", playerSizer);  /* Resize on load */
window.addEventListener("resize", playerSizer);  /* Resize on change in window size */

/* Resize function */
function playerSizer() {
  var player = document.getElementById("player");  /* Element ID */
  var width = player.offsetWidth;  /* Get width */
  player.style.height = (width * 0.5625) + "px";  /* Aspect ratio */
}

<center>
  <!-- Remember to change your YouTube URL -->
  <!-- Note width="100%", this will be used to calculate height -->
  <!-- Note id="player", this will be used by JavaScript function -->
  <iframe 
    id="player" 
    width="100%" 
    src="YOUR URL" 
    frameborder="0" 
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
      Your browser does not support this, try viewing it on YouTube: YOUR URL
    </iframe>
</center>

JavaScriptとHTMLを分離したくない場合のコードは次のとおりです。

<center>
  <iframe id="player" width="100%" src="YOUR URL" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>Your browser does not support this, try viewing it on YouTube: YOUR URL</iframe>
</center>
<script>
  window.addEventListener("load", playerSizer);
  window.addEventListener("resize", playerSizer);
  function playerSizer() {
    var player = document.getElementById("player");
    var width = player.offsetWidth;
    player.style.height = (width * 0.5625) + "px";
  }
</script>

お役に立てれば？？？？

2020/02/11Anthony Kung