自適應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教程: