レスポンシブYouTubeビデオ埋め込み

YouTube動画をサイトに埋め込んで応答性を高め、モバイルデバイスで縮小する方法

YouTubeビデオを埋め込むことの問題は、それらがiframeまた、iframeには正確な高さと幅を指定する必要があります。そうしないと、ファンキーに見えます。

また、ビデオのアスペクト比に基づいて比率を維持する必要があります。

YouTubeビデオをページにレスポンシブで表示するには、最初にそれをコンテナdivにラップします。

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/klZNNUz4wPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

次に、このCSSをサイトに追加します。

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after { padding-top: 56.25%; display: block; content: ‘’; }

.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

それを参照してくださいマジックナンバー56.25%?これは、ビデオのアスペクト比が16:9の場合のパディングとして必要です。 (9は16の56.25%です)。

たとえば、動画が4:3の場合は、75%に設定します。

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: