ナレッジベース → 幅 100% の Web サイトへのアダプティブビデオ埋め込み

通常、サイトに動画を埋め込む際には、フレームのサイズがコードに指定されます。そのため、画面の解像度が変更された場合、異なるデバイスで表示される埋め込み動画が、あたかも動画ホスティングサイト自体で開かれたかのように、画面に適応せずに表示されてしまいます。

私たちの目標は、ページサイズが変更された際に、動画フレームも自動的にサイズを変更するようにすることです。サイトを異なるデバイスで開いた場合、動画は画面サイズに合わせて調整されます。

このガイドは、YouTubeサービスおよびMediaCMSアプリでテストされています。

デフォルトでは、以下のようなリンクが得られます：

<iframe width="560" height="315" src="https://synay.dev/embed?m=d0xUIusUo" frameborder="0" allowfullscreen></iframe>

動画を自動調整するには、このコードを次のように変更します：

<div class="container">
<iframe src="https://synay.dev/embed?m=d0xUIusUo" 
frameborder="0" allowfullscreen class="video"></iframe>
</div>

ご覧の通り、固定サイズを削除し、2つのCSSクラス「container」と「video」を追加しました。

次に、これらのクラスをサイトのスタイルシートに追加する必要があります：

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

コンテナ要素には高さをゼロに設定し、下部にパーセンテージのパディングを設定します。このパディングはコンテナの幅のパーセンテージであるため、固定のアスペクト比を持つことになります。しかし、ゼロの高さのコンテナ内にiframeを表示するには、コンテナを相対位置にし、iframeを絶対位置にして、div内に配置する必要があります。

また、ブラウザがキャッシュした以前のスタイルファイルではなく、最新のファイルを読み込むために、CSSファイルのパスにバージョンを追加することを忘れないでください。

例：

<link rel="stylesheet" href="https://domain.tld/css/style.min.css?_v=202408222001">

これで、埋め込んだ動画は画面サイズやブラウザウィンドウのサイズに自動的に対応するようになります。